html - 如何使 html5 section 元素居中？垂直

Question

这里基本上是我的 html 结构，内容部分是我希望在页眉和页脚之间居中的部分，以便在所有分辨率下它都位于中间。我试过使用表格方法，你在带有 display:table 的部分周围放置一个 div，然后将内容部分设置为 display:table-cell;垂直对齐:中间；但它似乎影响了 div/部分在内容中的定位，并将屏幕左上角的部分定位在具有位置的标题元素的顶部:绝对;。

<header>
</header>
<section id="container">
<section id="content">
</section>
</section>
<footer>
</footer>

Answer 1

让我们假设:

div {width: 300px; height: 200px;}

你可以添加:

div {position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -150px;}

将 body 标签内的所有元素“包裹”起来是一种很好的做法。

让我知道这对您有何帮助。