CSS实现垂直对齐的4种思路_html/css_WEB-ITnose

× 目录 [1]line-height [2]vertical-align [3]absolute [4]flex

前面的话

　　相对于水平居中，人们对于垂直居中略显为难，大部分原因是vertical-align不能正确使用。实际上，实现垂直居中也是围绕几个思路展开的。本文将介绍关于垂直居中的4种思路

 

思路一： 行高line-height实现单行文本垂直居中

　　行内流传着一种说法，单行文本垂直居中要将高度和行高设置成相同的值，但高度其实没必要设置。实际上，文本本身就在一行中居中显示。在不设置高度的情况下，行高撑开高度

<style>.test{    line-height: 50px;    background-color: lightblue;}    </style>

<div class="test">测试文字</div>

 

思路二：设置vertical-align:middle实现垂直居中

【1】设置父元素的display为table-cell

　　通过为table-cell元素设置vertical-align:middle，可使其子元素均实现垂直居中。这和表格里单元格的垂直居中是类似的

　　[注意]若要IE7-浏览器支持，则可以将其改为

表格结构

　　[注意]设置为table-cell的div不能使用浮动或绝对定位，因为浮动或绝对定位会使元素具有块级元素特性，从而丧失了table-cell元素具有的垂直对齐的功能。若需要浮动或绝对定位处理，则需要外面再套一层div

<style>.parent{  display: table-cell;  vertical-align: middle;}</style>

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

【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>

<div class="parent" style="background-color: lightgray;width:200px;">    <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif"    style="max-width:90%" alt="test">  </div>

【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>

<div class="parent" style="background-color: lightgray; width:200px;">  <div class="child" style="background-color: lightblue;">我是比较长的比较长的多行文字</div>  <i class="childSbling"></i> </div> 

 

思路三：通过绝对定位实现垂直居中

【1】配合translate()位移函数

　　translate函数的百分比是相对于自身高度的，所以top:50%配合translateY(-50%)可实现居中效果

　　[注意]IE9-浏览器不支持

　　[注意]若子元素的高度已知，translate()函数也可替换为margin-top: 负的高度值

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

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

【2】若子元素定高，结合绝对定位的盒模型属性，实现居中效果

<style>.parent{  position: relative;}.child{ position: absolute; top: 0; bottom: 0; margin: auto 0; height: 50px;}</style>

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

　　在水平居中对齐中，元素外层套一层div并设置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>

<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>