Centering child that has position absolute to a parent with display flex

Question

How can I center/middle a child element with position absolute. On a parent that has display flex?

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

.parent{
  display: flex;
  align-items: center;
}

.child{
  position: absolute;
}

The child element has to overlap the parent.

Set parent element as relative, after this, you can center his child as always. https://stackoverflow.com/questions/1776915/how-to-center-absolutely-positioned-element-in-div — Kamil Naja, Aug 27 '18 at 09:19

score 1 · Accepted Answer · answered Aug 27 '18 at 09:22

1

Try this

.parent{
display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   width:100%;
   height: 100%;
}

.child{
  position: absolute;
  background-color:#f00;
  border:1px solid #333;
  
}

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

answered Aug 27 '18 at 09:22

CodeZombie

1,754
12
22

Thanks it works now I had to add transform: translate(0, -50%); to get it in the middle. – Raymond the Developer Aug 27 '18 at 09:31

Centering child that has position absolute to a parent with display flex

1 Answers1