Center an abolute poseitioned element inside its parent element

Question

I want to center a div element that have a position value of absolute inside of its parent element. I want so center it both vertically and horizontal.

How would i do that?

<div class="parent_div">
  <div class="centered_div">
    <p>text</p>
    <p>text</p>
  </div>
  <a href=""><img src="img" alt="image"></a>
  <p>text</p>
  <p>text</p>
 </div>

So the centered_div should be centered in the parent_div

Possible duplicate of [How to center an element horizontally and vertically?](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — Bryan, Jan 13 '18 at 16:53
Include the code so that it may be used as a reference to demonstrate a working solution and indicate what you have already tried. — UncaughtTypeError, Jan 13 '18 at 16:57
This question has been asked a million times already. See [here](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically). — Angel Politis, Jan 13 '18 at 17:00
Bryan then the element is centered in the middle of the webpage og want to center it in the middle og the parent element — MariusE, Jan 13 '18 at 17:03
Possible duplicate of [How to center absolutely positioned element in div?](https://stackoverflow.com/questions/1776915/how-to-center-absolutely-positioned-element-in-div) — Temani Afif, Jan 13 '18 at 18:31

RyanDay · Accepted Answer · 2018-01-13T19:58:50.013

You can do this by setting the parent's position to relative. Then set the child's top, right, bottom, and left properties to 0, and setting the margin to auto.

.parent {
  width: 300px;
  height: 300px;
  border: 1px solid #ddd;
  position: relative;
}
.child {
  width: 100px;
  height: 100px;
  background: #ddd;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

<div class="parent">
  <div class="child"></div>
</div>

Edit

As mentioned, using top, right, bottom, and left properties set to 0 with auto margins only works if the child element has a set width and height. Otherwise, the child will simply fill the entire width and height of the parent. If you want to center a child without specifically setting it's width and height, you can do it using the CSS translate() function.

First you can center the top left corner of the child by setting the child's top and left to 50% of it's parent's width and height. Then shift it over and up by 50% of it's own width and height.

.parent {
  width: 400px;
  height: 300px;
  border: 1px solid #ddd;
  position: relative;
}
.child {
  padding: 20px;
  background: #ddd;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
}

<div class="parent">
  <div class="child">
    <p>Lorem ipsum dolor.</p>
  </div>
</div>

For this method to work the nested *absolutely positioned* element would require explicitly defined `height` and `width` property values. Consider including a solution for cases which do not have explicitly defined property values of this type. — UncaughtTypeError, Jan 13 '18 at 17:05

Center an abolute poseitioned element inside its parent element

1 Answers1

Edit