Aligning position absolute div to middle?

Question

I have a parent div and a child div. The child div has the position: absolute property. It is already centered, but I'd like to align it to the middle of the parent div. How do I go about doing that? Here's my jsFiddle

HTML

<div id='parent'>
  <div id='child'>

  </div>
</div>

CSS

#parent {
  position: relative;
  width: 500px;
  height: 300px;
  background-color: red;
}

#child {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: blue;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 50%;
}

Possible duplicate of [CSS Center text (Horizontal and Vertical) inside a DIV block](http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block) — Rob, Apr 18 '17 at 19:36

score 8 · Accepted Answer · answered Apr 18 '17 at 18:30

8

The solution is to use transform: translate(-50%, -50%) on the child div, like so:

#child {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: blue;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/jwoy7rxr/

This works because the transform positions the item based on a percentage from it's own point of origin.

answered Apr 18 '17 at 18:30

Toby

12,743
8
43
75

Thanks a lot for your answer! With the transform property, would that work on most modern day browsers? – user2896120 Apr 18 '17 at 18:36
Support it good - but you'll need to use autoprefixer or add the vendor prefixes by hand. – sheriffderek Apr 18 '17 at 18:44

score 0 · Answer 2 · answered Apr 18 '17 at 18:35

Since the parent has a height based on px, you can safely use a simple margin top and bottom to centre the element.

#parent {
  position: relative;
  width: 500px;
  height: 300px;
  background-color: red;
}

#child {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: blue;
  left: 0;
  right: 0;
  margin: 115px auto;
  border-radius: 50%;
}

Here's the fiddle: https://jsfiddle.net/Lr3fLser/

Mike Hawes · Answer 3 · 2017-04-18T19:29:18.563

You need to give the parent:

 #parent {
   width: 500px;
   height: 500px;
   background-color: red;
   display: table-cell;
   vertical-align: middle;
 }

 #child {
   width: 70px;
   height: 70px;
   background-color: blue;
   border-radius: 50%;
 }

You need the display table-cell in order to use the vertical-align.

Then add align="center" to the parent div's:

  <div align="center" id="parent">
    <div id='child'>

    </div>
 </div>

I have the updated JSFiddle attached:

https://jsfiddle.net/o7pzvtj3/2/

Aligning position absolute div to middle?

3 Answers3