CSS实现垂直居中的方法

编辑作者:www.789mux.com    在线用户:49    标签: css    sp    HTTP   

我们在中实现垂直居中并不是以一件很容易的事情,有些方法在浏览器中是无法实现的,那么接下来爱站小编就将为大姐介绍CSS实现垂直居中的方法及优缺点。

CSS实现垂直居中的方法-第1张图片

方法一
这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。
 

复制代码
代码如下:

<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here</div>
</div>
</div>


css:
#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}
优点:
content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时, content 不会被截断

缺点:
Internet Explorer(甚至 IE8 beta)中无效,许多嵌套标签(其实没那么糟糕,另一个专题)

方法二: 
       这个方法使用绝对定位的 div,把它的 top 设置为 50%,top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。 

       因为有固定高度,或许你想给 content 指定 overflow:auto,这样如果 content 太多的话,就会出现滚动条,以免content 溢出。

 

 

 

<div class="content"> Content goes here</div>

css:
#content {
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}
优点:
适用于所有浏览器
不需要嵌套标签

缺点:
没有足够空间时,content 会消失(类似div 在 body 内,当用户缩小浏览器窗口,滚动条不出现的情况)

本文介绍的是CSS实现垂直居中的方法,其实利用CSS实现垂直居中有许多不同的方法,实现垂直居中方法并不难,最难的就是如何选择正确的方法。

请发表您的评论