在页面中间水平和垂直居中div

Question

我正在尝试在页面中间获得如下所示的页面布局，其中水平和垂直居中div的页眉和页脚固定在页面的顶部和底部

这在除ie6和ie7之外的所有浏览器中都很好用。

谁能帮我解决这个问题？ 我是服务器端开发人员，并且是前端的新手。 我做了一些搜索，但是找不到解决方案。

感谢您的帮助。

Answer 1

使用CSS垂直居中可能会很痛苦。 看看Dead Center 。 它需要一个额外的容器“水平”来知道垂直中心在哪里，不幸的是，您必须知道要居中的内容的尺寸，以便可以偏移它。

像这样...

 body { margin: 0px } #horizon { text-align: center; position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; overflow: visible; visibility: visible; display: block } #content { margin-left: -125px; position: absolute; top: -35px; left: 50%; width: 250px; height: 70px; visibility: visible }

 <body> <div id="horizon"> <div id="content"> content you want centered </div> </div> </body>

Answer 2

 .centered { background-color: red; width:50px; height:50px; position: fixed; top: 50%; left: 50%; /* bring your own prefixes */ transform: translate(-50%, -50%); }

 <div class="centered">

Answer 3

这在Chrome 38上不再能正常工作。尝试在上方加载死点网站并调整浏览器的大小-请查看文字中的变形。

在页面中间水平和垂直居中div

问题描述

3 个解决方案

解决方案1
5 2011-12-30 14:50:51

解决方案2
1

解决方案3
0 2014-10-14 18:06:02

在页面中间水平和垂直居中div

问题描述

3 个解决方案

解决方案1 5 2011-12-30 14:50:51

解决方案2 1

解决方案3 0 2014-10-14 18:06:02

解决方案1
5 2011-12-30 14:50:51

解决方案2
1

解决方案3
0 2014-10-14 18:06:02