整个DIV水平和垂直居中于屏幕

最新推荐文章于 2025-09-20 13:23:29 发布

转载最新推荐文章于 2025-09-20 13:23:29 发布 · 3.3k 阅读

文章标签：

#div #居中 #div居中 #div水平居中 #div垂直居中

DIV+CSS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用CSS实现元素垂直居中的方法，通过设置元素相对于顶部的位置为50%，并利用`margin-top`调整元素位置来实现。此方法在IE8及Firefox等浏览器上表现良好。

.vertical-center {position:absolute; width:100%; top:50%; margin-top:-150px; height:300px;}
原理是：相对于顶部位置50%；这样这个div的最顶端就处于垂直居中的中心线上；然后用margin-top：将div向上移动半个div的高度。就实现了垂直居中。这个原理还适用于水平居中，记住margin的值=div的高度/2 就行了. IE8.FF测试无BUG,前提是你的div的高度不能超过浏览器的窗口,也就说你的页面不能有纵向下拉条!