CSS实现垂直居中的方法

2019-08-14 09:39:35来源:爱站网 阅读 ()

新老客户大回馈,云服务器低至5折

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

方法一
这个方法把一些 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实现垂直居中有许多不同的方法,实现垂直居中方法并不难,最难的就是如何选择正确的方法。

原文链接:https://js.aizhan.com/web_authoring/css/8176.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS让网页文字自动隐藏的教程

下一篇:IE8的有趣新功能