垂直對齊塊級元素，水平寬度為 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

我通常使用兩個 ensted 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>

這里的訣竅是

顯示：表格單元格

試試看：D