方式一：单行文本垂直居中

其实单行文本垂直居中是垂直居中中最为简单的了。通常使用line-height 和 height配合使用即可，也就是将line-height和height设置为同样的数值。
当然也有道友说其实这个地方设置height值其实完全没有必要，容器会根据line-height自动撑开。这个理论实际上是正确的，他的正确的前提在于该元素内只有文本节点。
但是如果父级元素不设置高度，子元素设置了高度，这个时候就不能垂直居中了，因为父级元素的高度和子元素的高度+margin值一样了。因此为了保险建议还是设置height和line-height相同，来实现单行文本的居中。

<span style="font-size:14px;"><div style="height:200px;line-height:200px;">我是垂直居中的
</div></span>

方式二：利用vertical-align垂直居中

很多人说vertical-align不好用，使用了这个样式，达不到居中的效果。其实写这个文章之前我也是这么认为的，但是看了vertical-align的说明后，才发现是自己用错了。在w3c上面，vertical-align是这样解释的：
“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”
根据这个话，做垂直居中其实可以这样玩：

（1）、设置父级元素为table-cell

通过设置父级元素为display:table-cell以及vertical-align:middle，这样就可以使子元素垂直居中了。这里呢和table里面的垂直居中类似。
注意：设置为display:table-cell的元素，千万不能使用浮动或者定位，否则会丧失table-cell元素的垂直居中的功能。因为浮动和定位是块级元素专有的。如果实在要使用浮动或者定位，可以再外面套一层div，在这个div上面使用浮动或者定位。

<div style="height:200px;display:table-cell;vertical-align:middle;"><div>我是垂直居中的,多点字可以变成多行文本我是垂直居中的,多点字可以变成多行文本我是垂直居中的,多点字可以变成多行文本我是垂直居中的,多点字可以变成多行文本</div>
</div>

（2）、如果子元素是图片

vertical-align:middle的解释是元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐。由于字符X在em框中并不是垂直居中的，且各个字体的字符X的高低位置不一致。所以，当字体大小较大时，这种差异就更明显。当font-size为0时，相当于把字符X的字体大小设置为0，于是可以实现完全的垂直居中。

<div style="height:200px;font-size:0px;line-height:200px;"><img style="vertical-middle:middle;" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</div>

(3)、通过新增元素来实现垂直居中

可以将新增的元素高度设置的和父级元素一样高，宽度为0，并且同样设置vertical-middle:middle以及display:inline-block;
由于两个元素之间的空白会被解析，因此需要在父级设置font-size:0px;在子级又将font-size设置回来。

<style>.parent{height:300px;font-size:0px;}.child{font-size:14px;display:inline-block;vertical-align:middle;}.childAdd{display:inline-block;vertical-align:middle;height:100%;width:0px;}</style>

<div class="parent"><div class="child">我是垂直居中的,多点字可以变成多行文本我是垂直居中的</div><lable class="childAdd"></label>
</div>

如果对文档结构要求比较严格，其实我们也可以利用:after来实现。

<style>
#parent3{background: red;height:300px;font-size:0px;}#parent3:after{content:"";display:inline-block;height:100%;vertical-align: middle;}#parent3>div{font-size:1rem;vertical-align:middle;display: inline-block;}
</style>

<div id="parent3"><div>我就是想垂直居中而已我就是想垂直居中而已我就</div>
</div>

方式三：通过绝对定位来实现垂直居中

配合translate()位移函数。translate样式的百分比是相对于自身高度的。而top的百分比是相对于父级元素的高度的。因此可以利用这个特性来实现垂直居中。

<style>
.parent{position:relative;
}
.child{position: absolute;top: 50%;transform: translateY(-50%);
}
</style>

<div class="parent" style="height:100px;"><div class="child">测试文字</div>
</div>

那么同样的道理，如果要求body的子元素垂直居中，也可以使用margin来实现。

<style>
.child{margin-top:50vh;transform:translateY(-50%);
}
</style>

<body><div class="child">测试文字</div>
</body>

方式四：使用弹性盒模型flex实现垂直居中

（1）、在伸缩容器上设置侧轴对齐方式align-items: center

<style>
.parent{display: flex;align-items: center;
}
</style>

<div class="parent" style="background-color: gray; height: 100px;"><div class="child" style="background-color: lightblue;">测试文字</div>
</div>

（2）、在伸缩项目上设置margin: auto 0

<style>
.parent{display: flex;
}
.child{margin: auto 0;
}
</style>

<div class="parent" style="background-color: gray; height: 100px;"><div class="child" style="background-color: lightblue;">测试文字</div>
</div>

以上则是垂直居中的几种实现方式。有一些是利用了css3的样式属性，使用的时候一定要注意。

实现垂直居中的几种方式相关推荐

css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
css实现水平垂直居中的七种方式
css实现水平垂直居中的七种方式一.使用grid布局二.使用flex布局三.使用定位+外边距四.使用定位+平移五.使用外边距 + 平移六.使用文本对齐 + 行高七.使用表格单元一.使用 ...
css实现垂直居中的几种方式
css布局实现垂直居中的几种方式一.单行元素垂直居中二.对文本进行垂直居中三.对已知高度块级元素进行垂直居中四.对未知高度块级元素进行垂直居中 <div class="par ...
HTML水平垂直居中的四种方式
第一种方式是使用margin进行移动水平居中 margin:0 auto; <!DOCTYPE html> <html lang="en"> <he ...
CSS实现水平垂直居中的几种方式
1.最简单 margin: 0 auto line-height等于height .outer {width: 200px;padding: 200px;background-color: pink; ...
元素垂直居中的五种方式
元素内容垂直居中本文介绍: 元素标签内的内容垂直居中有两种思路, 第一种思路是将元素内容利用行高或者内边距padding属性设置第二种思路是子盒子在父盒子中垂直居中,利用flex布局或者posit ...
水平垂直居中的几种方式
文章目录水平垂直居中一.实现水平垂直居中的方式二.具体实现元素定宽高利用定位 + calc 利用定位 + margin:负值元素不定宽高利用定位 + margin:auto 利用定位 + ...
CSS3实现垂直居中的八种方式
第一种: 通过verticle-align:middle实现垂直居中通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生 ...

实现垂直居中的几种方式