CSS垂直居中的四种方法

写在前面的话

最近在Stack Overflow上看到 一个不错的回答 ，以下是我对其的总结，分享给大家。

 

垂直居中的四种方法

①基础的方法

设置父元素的line-height等于height，这种方法只适用于对一行文字进行垂直居中对齐

<div style="width: 300px; height: 300px;  line-height: 300px; background: #FF6600; margin: 50px auto;">
    <p> 设置父元素line-height = height </p>
</div>

 

②使用vertical-align：middle

这是另一种垂直居中对齐的方法，适用于单行文本和多行文本，但它仍然需要一个高度固定的父元素盒子。

<div>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

下面是样式表

        div {
            width: 250px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background: #bbbbbb;
        }

        span {
            display: inline-block;
            vertical-align: middle;
            line-height: normal;
        }

③模拟table display

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

 

下面是样式表

div {
  display: table;
  width: 250px;
  height: 100px;
  text-align: center;
}

span {
  display: table-cell;
  vertical-align: middle;
}

 

这是另外一种垂直居中对齐的方法，但是它可能不能在老的浏览器中实现（IE7以下）

④使用绝对定位

这种方法使用绝对定位，并设置top、bottom、left、right都为0，在Smashing Magazine的文章中描述了更多的细节。

<div class="outer">
    <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

 

下面是样式表

        div.outer{
            position: relative;
            width: 500px;
            height: 500px;
            background: #bbbbbb;
        }

        div.inner {
            width: 50%;
            height: 50%;
            overflow: auto;
            margin: auto;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
            background: #FF6600;
        }

 

效果图

 结尾

如果有更多垂直居中的方法，希望能交流学习以下，在此感谢。