html - 垂直对齐 block 级元素，水平宽度为 90%

Question

好的，我可以使用它水平和垂直对齐内容

<div id="centerId">...content</div>

#contentId {width: 300px; height: 200px; position: absolute; left: 50%; margin-left: -150px; top: 50%; margin-top: -100px; }

现在，如果我希望宽度为 #contentId 所在容器的 90%，如何对齐。

Answer 1

我通常使用如下两个嵌入的 div...

<div style="display: block; height: 100%;  width: 100%; position:relative; overflow: hidden;margin: 0px auto;">
 <div style="position: absolute; top: 40%;left:0px;display: table-cell; vertical-align: middle;text-align:center;">
    Content Here...
 </div>
</div>

这里的技巧是

display: table-cell

试一试:D