CSS实现垂直对齐的4种思路_html/css_WEB-ITnose-HTML-Tutorial-php.cn

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

前面的话

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

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

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

思路二：设置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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

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

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

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

<关于增加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>

Nach dem Login kopieren

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

Nach dem Login kopieren

【2】在伸缩项目上设置margin: auto 0

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Verwandte Etiketten：

CSS实现垂直对齐的4种思路

Quelle：php.cn

Vorheriger Artikel：Lessgo 最佳实战 web 框架 0.5.0 版本首发_html/css_WEB-ITnose Nächster Artikel：第 11 章全局属性和其他_html/css_WEB-ITnose

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors