html - 垂直和水平对齐

我的问题如下:

我将一个 div 垂直居中。但是，我想将另一个 div 水平居中。问题是我无法将其水平居中。

(X)HTML:

<body>
<div id="strut"></div>
<div id="page">
    <div id="inner_page">
        <h1>Galidie "jQzz" Clément</h1>
    </div>
</div>

CSS:

html, body {
margin: 0;
padding: 0;
height: 100%;
}

#strut, #page {
    display: inline-block;
    vertical-align: middle;
}

#strut {
    height: 100%;
}

#page {
    border: 1px solid #c00;
}

#inner_page {
    width: 750px;
    margin: 0 auto;
    background-color: #c00;
}

h1 {
    text-align: center;
    margin: 0;
}

strut 是元素垂直居中的标记。页面垂直居中。这个想法是尝试将 inner_page block 水平居中。

我应该使用绝对位置吗？或者别的什么？我选择了好的方法吗？

最佳答案

#page 是行内 block ，所以它总是会占用其子元素的尺寸。在这种情况下，它唯一的 child 是 #inner_page，它是 750px，所以它们的大小相同。这意味着您不能真正将它置于 #page 的中心。

例如，您可以通过将 text-align:center 放在 body 上来使 #page 本身居中。

关于html - 垂直和水平对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12983524/