小编给大家分享一下CSS怎样实现垂直居中，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联建站专注于名山网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供名山营销型网站建设，名山网站制作、名山网页设计、名山网站官网定制、小程序开发服务，打造名山网络公司原创品牌,更为您提供
名山网站排名全网营销落地服务。
行高line-height实现单行文本垂直居中
以前一直认为单行文本垂直居中要将高度和行高设置成相同的值，但高度其实没必要设置。实际上，文本本身就在一行中居中显示。在不设置高度的情况下，行高撑开高度。
测试文字
表格结构[注意] 设置为table-cell的div不能使用浮动或绝对定位，因为浮动或绝对定位会使元素具有块级元素特性，从而丧失了table-cell元素具有的垂直对齐的功能。
若需要浮动或绝对定位处理，则需要外面再套一层div。
我是有点长的有点长的有点长的有点长的测试文字
【2】若子元素是图片，通过设置父元素的行高来代替高度，且设置父元素的font-size为0。
vertical-align:middle的解释是元素的中垂点与父元素的基线加1/2 父元素中字母X的高度对齐。由于字符X在em框中并不是垂直居中的，且各个字体的字符X的高低位置不一致。
所以，当字体大小较大时，这种差异就更明显。当 font-size为0时，相当于把字符X的字体大小设置为0，于是可以实现完全的垂直居中。
【3】通过新增元素来实现垂直居中的效果
新增元素设置高度为父级高度，宽度为0，且同样设置垂直居中vertical- align:middle的inline-block元素。由于两个元素之间空白被解析，所以需要在父级设置font-size:0，在子级再将 font-size设置为所需值；若结构要求不严格，则可以将两个元素一行显示，则不需要设置font-size:0。
我是比较长的比较长的多行文字
思路三：通过绝对定位实现垂直居中
【1】若子元素不定高， 使用top50%配合translateY(-50%)可实现居中效果。
translate函数的百分比是相对于自身高度的，所以top:50%配合translateY(-50%)可实现居中效果。
[注意] IE9-浏览器不支持；
[注意]若子元素的高度已知，translate()函数也可替换为margin-top: 负的高度值。
测试文字
【2】若子元素定高，结合绝对定位的盒模型属性，实现居中效果
测试文字
<关于增加div层级的说明>
在水平居中对齐中，元素外层套一层div并设置absolute，元素设置负margin-left或者relative的负left属性，可以实现水平居中的效果。但由于margin是相对于包含块宽度的，这样margin-top:-50%得到的是宽度而不是高度的-50%，所以不可行；对于relative的百分比取值而言，在包含块高度为auto的情况下，chrome、safari和IE8+浏览器都不支持设置元素的百分比top值，所以也不可行。
思路四：使用弹性盒模型flex实现垂直居中
[注意] IE9-浏览器不支持
【1】在伸缩容器上设置侧轴对齐方式align-items: center
测试文字
【2】在伸缩项目上设置margin: auto 0
测试文字
以上是“CSS怎样实现垂直居中”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
文章名称：CSS怎样实现垂直居中-创新互联
路径分享：http://bzwzjz.com/article/dchhgh.html
