HTML结构如下
<div class="wrapper">
<div class="content">
</div>
</div>
CSS 如下：
.wrapper {
width: 100%;
height: 500px;
text-align: center;
background: yellow;
}
.content {
display: inline-block;
background: red;
width: 100px;
height: 100px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
最终效果如下：
vertical-alignment.png
利用垂直变化可以很好地实现这种需求，而且代码量更少。通常使用line-height或者绝对定位的时候，都必须知道元素的高度，而这个方法更加灵活。
本文将介绍的居中方法有 ，水平居中，垂直居中和水平垂直居中。 一水平居中 二水平垂直居中
CSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: 单行文字的垂直居中： 让有宽度的div水平居中：...
1、垂直居中 2、水平居中 3、垂直水平居中 方法1：使用绝对定位 方法二：使用display:flex 扩展1：...
网页布局中，元素水平居中比垂直居中简单不少，同时实现水平垂直居中也不难，难的是想出多种实现水平垂直居中的方法并从中...
CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 CSS实现盒子模型水平居中的方法 全局样式 第一种：...
div高度不固定，垂直居中的方法-汇总 1、高度宽度不固定，内容区域垂直居中
水平居中和垂直居中可以说是在开发中经常遇到的问题，网上搜索水平居中和垂直居中的方法有很多，有的方法并不是很好，所以...
# 让div在屏幕上居中（水平居中+垂直居中）的方法总结 - html代码如下： - Css居中方法 （敲黑板）...
CSS垂直居中的方法总结： 1.利用padding垂直居中(line-height用于单行文本居中) **不需要设...
多种css垂直居中的方法 ==css3不定宽高水平垂直居中== 1：固定高宽的垂直居中 如上图，固定高宽的很简单，...
本文标题：一个垂直居中的方法
本文链接：https://www.haomeiwen.com/subject/botvmttx.html
网友评论