Question

我刚开始使用HTML和CSS制作简单的网页，我想将我的内容集中在页面中间。使用我的代码，我的内容从左侧和右侧居中，但我也想从顶部和底部居中。如果你要测试我的代码，你会发现顶部没有间距。我如何解决这个问题，不仅要从左到右，而且从上到下都有中心？

我的CSS代码看起来像这样：

body {
width: 100%;
height: 100%;
background-color: green;
}

#homePage {
    width: 960px;
    height: 600px;
    background-color: white;
    margin: 0 auto;
}

我的HTML代码如下所示：

<body>
    <div id="homePage">
        <header> Logo and Twitter </header> 
        <ul id="pageNav">
            <li><a href="index.html">Home</a></li>
            <li><a href="features.html">Features</a></li>
            <li><a href="purchase.html">Purchase</a></li>
            <li><a href="contact.html">Contact</a></li> 
        </ul>               
        <footer> Content for footer goes here </footer>
    </div>                                  
</body>

Answer 1

谷歌“死中心css”。记住拼写。你会得到this invaluable link。

Answer 2

你可以使用这样的定位：

body {
    background-color: green;
}
#homePage {
    width: 960px;
    height: 600px;
    background-color: white;
    margin: auto;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

<强> jsFiddle example

在#homePage上使用绝对定位，将top，right，bottom和left设置为零，并将边距设置为auto，它将水平和垂直居中。

Answer 3

为什么不尝试更改显示？例如：

#homePage {
  width: 960px;
  height: 600px;
  background-color: white;
  margin: auto;
  display:block;
}

Answer 4

使用宽度和边距进行水平对齐时，垂直中间对齐并不容易。对我来说，最好的解决方案是

How to vertically center a div for all browsers?

它不包含任何黑客并适合响应式设计

Answer 5

j08691的精彩CSS技巧！您也可以在页面加载和重新调整大小时尝试此操作：

var _nBodyHeight = $('body').height();
var _nTop = (_nBodyHeight/2) - ($('#homePage').height()/2);
$('#homePage').css('top', _nTop);

使用CSS将中心框放入页面中间

5 个答案: