最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
整理CSS实现垂直居中的5种方法优缺点
时间：2022-06-25 09:30:16 编辑：袖梨 来源：一聚教程网
方法一
这个方法把一些div的显示方式设置为表格，因此我们可以使用表格的vertical-alignproperty属性。
Contentgoeshere
#wrapper{display:table;}
#cell{display:table-cell;vertical-align:middle;}
优点：
content可以动态改变高度(不需在CSS中定义)。当wrapper里没有足够空间时，content不会被截断
缺点：
InternetExplorer(甚至IE8beta)中无效，许多嵌套标签(其实没那么糟糕，另一个专题)
方法二：
这个方法使用绝对定位的div，把它的top设置为50％，topmargin设置为负的content高度。这意味着对象必须在CSS中指定固定的高度。
因为有固定高度，或许你想给content指定overflow:auto，这样如果content太多的话，就会出现滚动条，以免content溢出。
Contentgoeshere
#content{
position:absolute;
top:50%;
margin-top:-120px;/*negativehalfoftheheight*/
}
优点：
适用于所有浏览器
不需要嵌套标签
缺点：
没有足够空间时，content会消失(类似div在body内，当用户缩小浏览器窗口，滚动条不出现的情况)
方法三
这种方法，在content元素外插入一个div。设置此divheight:50%;margin-bottom:-contentheight;。
content清除浮动，并显示在中间。