How do I center an absolutely positioned HTML block element? (Relative to its parent?)

Question

I've the following HTML:

<div id="parent" style="height: 300px; position: relative">
  <div id="child" style="width: 100px; height: 50px; bottom: 0; position: absolute">
     ... content ...
   </div>
</div>

In this HTML I've positioned #child at the bottom of #parent using absolute positioning.

However I'd also like to center #child within #parent . Parent's width changes through its use case so I can't just calculate it in pixels and apply half of pixels (to center) to child's left property.

Applying text-align: center to #parent doesn't center #child as it's absolutely positioned.

Applying text-align: center to #child centers content within child and doesn't affects its own positioning.

Any ideas how to center #child within #parent without JavaScript, if parent sometimes dynamically changes it's width?

Answer 1

Position the child left:0 and right:0 , and set the margin to auto .

 #parent { height: 300px; position: relative; background: #ccc; } #child { width: 100px; height: 50px; bottom: 0; position: absolute; left: 0; right: 0; margin: auto; background: red; } 

 <div id="parent"> <div id="child"> ... content ... </div> </div> 

Answer 2

.parent {
    position: relative;
    height: 300px; 
}
.child {
    width: 100px;
    height: 50px; 
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* the half of the element */
}

Answer 3

The easiest way to accomplish this is with transform:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Also, just a heads-up...your inline styles for #child & #parent are missing a ";" at the end.

Answer 4

It works with this css for the absolute positioned element:

#child {
 position: absolute;
 left:0; right:0;
 margin: 5px auto;
}

• See this tutorial: http://coursesweb.net/css/center-fixed-absolute-element_cs

Answer 5

Using flextable and margin auto can center a absolute positioned element

        #parent{
            position:relative;
            display: flex;
        }

        #child
        {
            margin:auto; 
        }

Answer 6

you could keep elements within the flux:

---

1) using the display: table ; property (requires an extra element, here body used as so )

 html, body { width: 100%; margin:0; } div { border:solid; } body { display:table; } #parent { display: table-cell; vertical-align: middle; width: 100%; } #child { margin: auto; } 

 <div id="parent" style="height: 300px; position: relative"> <div id="child" style="width: 100px; height: 50px; "> ... content ... </div> </div> 

---

2) using the display: flex ; property (young browser only).

 div { border:solid; } #parent, #child /* want to center child content too ? */{ display: flex; justify-content:center; align-items:center; } 

 <div id="parent" style="height: 300px; position: relative"> <div id="child" style="width: 100px; height: 50px; "> ... content ... </div> </div>