html - 如何使 html5 部分元素居中？垂直的

Question

这里基本上是我的 html 结构，内容部分是我想要在页眉和页脚之间居中的部分，以便在所有分辨率上它都在中间。我尝试使用 table 方法，在该方法周围放置一个带有 display:table 的部分，然后将内容部分设置为 display:table-cell; 垂直对齐：中间；但它似乎会影响 div/section 在内容中的定位，并将屏幕左上角的部分定位在具有 position:absolute; 的 header 元素的顶部。

<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 标签内的所有元素周围放置一个“包裹”是一种很好的做法。

让我知道这对你有用。

Answer 2

对于第一列；

float: left;
position: absolute;
left: 50%;

以此类推；

float: left;
position: absolute;
left: 70%;

但这种方法效率低下，您可能希望只float:left;在 div 内部使用。