表格结构
[注意] 设置为table-cell的p不能使用浮动或绝对定位 ，因为浮动或绝对定位会使元素具有块级元素特性，从而丧失了table-cell元素具有的垂直对齐的功能。
若需要浮动或绝对定位处理，则需要外面再套一层p。
<style>
.parent{
display: table-cell;
vertical-align: middle;
}
</style>
<p class="parent" style="background-color: gray;height: 100px;">
<p class="child" style="background-color: lightblue;">我是有点长的有点长的有点长的有点长的测试文字</p>
</p>
【2】若子元素是图片，通过设置父元素的行高来代替高度，且设置父元素的font-size为0。
vertical-align:middle的解释是元素的中垂点与父元素的基线加1/2 父元素中字母X的高度对齐。由于字符X在em框中并不是垂直居中的，且各个字体的字符X的高低位置不一致。
所以，当字体大小较大时，这种差异就更明显。当 font-size为0时，相当于把字符X的字体大小设置为0，于是可以实现完全的垂直居中。
<style>
.parent{
line-height: 100px;
font-size: 0;
}
.child{
vertical-align: middle;
}
</style>
<p class="parent" style="background-color: lightgray;width:200px;">
<img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</p>
【3】通过新增元素来实现垂直居中的效果
新增元素设置高度为父级高度，宽度为0，且同样设置垂直居中vertical- align:middle的inline-block元素。由于两个元素之间空白被解析，所以需要在父级设置font-size:0，在子级再将 font-size设置为所需值；若结构要求不严格，则可以将两个元素一行显示，则不需要设置font-size:0。
<style>
.parent{
height: 100px;
font-size: 0;
}
.child{
display: inline-block;
font-size: 20px;
vertical-align: middle;
}
.childSbling{
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
<p class="parent" style="background-color: lightgray; width:200px;">
<p class="child" style="background-color: lightblue;">我是比较长的比较长的多行文字</p>
<i class="childSbling"></i>
</p>
思路三：通过绝对定位实现垂直居中
【1】若子元素不定高， 使用top50%配合translateY(-50%)可实现居中效果。
translate函数的百分比是相对于自身高度的，所以top:50%配合translateY(-50%)可实现居中效果。
[注意] IE9-浏览器不支持；
[注意]若子元素的高度已知，translate()函数也可替换为margin-top: 负的高度值。
<style>
.parent{
position:relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<p class="parent" style="background-color: lightgray; height:100px;">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p>
【2】若子元素定高，结合绝对定位的盒模型属性，实现居中效果
<style>
.parent{
position: relative;
}
.child{
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
height: 50px;
}
</style>
<p class="parent" style="background-color: lightgray; height:100px;">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p>
<关于增加p层级的说明>
在水平居中对齐中，元素外层套一层p并设置absolute，元素设置负margin-left或者relative的负left属性，可以实现水平居中的效果。但由于margin是相对于包含块宽度的，这样margin-top:-50%得到的是宽度而不是高度的-50%，所以不可行；对于relative的百分比取值而言，在包含块高度为auto的情况下，chrome、safari和IE8+浏览器都不支持设置元素的百分比top值，所以也不可行。
思路四：使用弹性盒模型 flex实现垂直居中
[注意] IE9-浏览器不支持
【1】在伸缩容器上设置侧轴对齐方式align-items: center
<style>
.parent{
display: flex;
align-items: center;
}
</style>
<p class="parent" style="background-color: gray; height: 100px;">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p>
【2】在伸缩项目上设置margin: auto 0
<style>
.parent{
display: flex;
}
.child{
margin: auto 0;
}
</style>
<p class="parent" style="background-color: gray; height: 100px;">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
css3的pointer-events使用详解
focus-within的使用详解
CSS3做出无缝轮播广告
Atas ialah kandungan terperinci 常用的CSS实现垂直居中的4种方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan： Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
