垂直对齐块级元素，水平宽度为 90%

Question

Ok I can align a content both horizontally and vertically using this

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

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

Now how to align if I want width to be 90% of the container in which #contentId is.

Answer 1

I usually use two ensted divs as follows...

<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>

The trick here is the

display: table-cell

Give it a try:D