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; }
效果图
结尾
如果有更多垂直居中的方法,希望能交流学习以下,在此感谢。