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?

possible duplicate of [How to center absolute element in div?](http://stackoverflow.com/questions/1776915/how-to-center-absolute-element-in-div) — Maximillian Laumeister, Aug 23 '15 at 17:40
@MaximillianLaumeister I'm not so sure this is duplicate because in my case I've absolute element INSIDE of relative. — bodacydo, Aug 23 '15 at 17:48
@bodacydo an absolute positioned element is positioned relatively to the nearest positioned ancestor, not the viewport. So yes, it's a dupe. — Armel Larcier, Aug 23 '15 at 19:01
Thanks everyone! All the solutions work. I accept all solutions. :) — bodacydo, Aug 23 '15 at 22:10

score 2 · Answer 1 · answered Aug 23 '15 at 17:37

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>

score 1 · Answer 2 · answered Aug 23 '15 at 17:47

1

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

answered Aug 23 '15 at 17:47

dimitar

1,019
13
19

cdwyer · Answer 3 · 2015-08-23T17:40:42.643

0

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.

edited Aug 23 '15 at 17:40

answered Aug 23 '15 at 17:38

cdwyer

589
6
22

1

Likewise for the parent, but they aren't needed there. – BoltClock Aug 23 '15 at 17:38
Indeed, edited. Did not know that, though...valid to leave off the trailing ";"? – cdwyer Aug 23 '15 at 17:40
1

That's correct. The same goes in your CSS rules. Since there's nothing after the last declaration it'll self-terminate. – BoltClock Aug 23 '15 at 17:41
I never thought about it self-terminating, but that makes perfect sense. Thanks for that! – cdwyer Aug 23 '15 at 17:42

CoursesWeb · Answer 4 · 2015-08-23T17:43:35.673

0

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

edited Aug 23 '15 at 17:43

answered Aug 23 '15 at 17:38

CoursesWeb

4,179
3
21
27

hengecyche · Answer 5 · 2015-08-23T18:02:42.273

0

Using flextable and margin auto can center a absolute positioned element

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

        #child
        {
            margin:auto; 
        }

edited Aug 23 '15 at 18:02

answered Aug 23 '15 at 17:41

hengecyche

299
1
2
16

Wow, what is `flex`? First time I hear. – bodacydo Aug 23 '15 at 17:50

score 0 · Answer 6 · answered Aug 23 '15 at 17:43

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>

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

6 Answers6