Question

How do you Horizontally center align a DIV that is absolutely positioned in another DIV ?

HTML

<div style="width:250px;height:250px;background:red;position:relative;">
    <div style="width:100px;height:100px;background:blue;position:absolute;"></div>
</div>

Thank You

Answer 1

My answer works only if the background of the inner div has no background color. As your example does, I add a third div. The second one is for the centering, the third one is for the coloring.

<div style="width:250px;height:250px;background:red;position:relative;">
  <div style="width:100px;height:100px;position:absolute;padding-left:50%;margin-left:-50px">
    <div style="background:blue;padding:0px;"></div>
  </div>
</div>

The important thing to notice here is: padding-left:50%;margin-left:-50px;. -50px being half of you div’s width.