Centering elements in absolutely-positioned parent

Question

Unfortunately, I am unable to center the elements in the position: absolute parent.

Here is my code:

.cont-img {
  width:400px;
  position: relative;
}
.image {
  width:400px;
  height:400px;
  background:black;
}
.desc {
  position: absolute;
  top:0px;
  height:100%;
  width:100%;
  color:gold;
  display:table;
}
.centered-items {
  text-align:center;
  display:table-cell;
  vertical-align: middle;
}

<div class="cont-img">
  <div class="image">
    
  </div>
  <div class="desc">
    <div class="centered-items">
      <div class="item1">
        asdasd
      </div>
      <div class="item2">
        asdasd
      </div>
    </div>
  </div>
</div>

PS : I also tried the flex method but unfortunately it didn't work for me because the flex makes the elements not display.

All I need is to make the elements under this absolute parent centered vertically and horizontally.

score 2 · Accepted Answer · edited May 23 '17 at 11:44

CSS Positioning Method

For centering with absolute positioning it helps to use transform, in conjunction with the top and left offset properties. You don't need vertical-align or table properties.

.cont-img {
    width: 400px;
    position: relative;
}
.image {
    width: 400px;
    height: 400px;
    background: black;
}
.desc {
    position: absolute;
    top: 0;  
    height: 100%;
    width: 100%;
    color: gold;
}
.centered-items {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);     /* 1 */
}

<div class="cont-img">
    <div class="image"></div>
    <div class="desc">
        <div class="centered-items">
            <div class="item1">asdasd</div>
            <div class="item2">asdasd</div>
        </div>
    </div>
</div>

Notes:

Here's an explanation of how this works: Element will not stay centered, especially when re-sizing screen

CSS Flexbox Method

For centering with flexbox, here's an example:

.cont-img {
    width: 400px;
    position: relative;
}
.image {
    width: 400px;
    height: 400px;
    background: black;
}
.desc {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;             /* 2 */
    align-items: center;                 /* 2 */
    height: 100%;
    width: 100%;
    color: gold;
}

<div class="cont-img">
    <div class="image"></div>
    <div class="desc">
        <div class="centered-items">
            <div class="item1">asdasd</div>
            <div class="item2">asdasd</div>
        </div>
    </div>
</div>

Notes:

Here's an explanation of how this works: https://stackoverflow.com/a/33049198/3597276

thanks allot those links helped allot :) have a good day sir ! — Un1xCr3w, Aug 15 '16 at 23:04

score 1 · Answer 2 · answered Aug 03 '16 at 10:18

Try this code

.cont-img {
  width:400px;
  position: relative;
}
.image {
  width:400px;
  height:200px;
  background:black;
  position:relative;
}
.desc {
  position: absolute;
  top:0px;
  height:100%;
  width:100%;
  color:gold;
  display:table;
}
.centered-items {
  text-align:center;
  display:table-cell;
  vertical-align: middle;
}

<div class="cont-img">
  <div class="image">
  
  <div class="desc">
    <div class="centered-items">
      <div class="item1">
        asdasd
      </div>
      <div class="item2">
        asdasd
      </div>
    </div>
  </div>
    
  </div>
</div>

score 1 · Answer 3 · answered Aug 03 '16 at 10:28

1

Just give height to cont-img class like below

.cont-img {
  width:400px;
  height:400px;
  position: relative;
}

answered Aug 03 '16 at 10:28

ExploreNav

386
2
11

unfortunately i cant't cuz it will be height:100% , width:100% – Un1xCr3w Aug 03 '16 at 16:00
Then use tabel effect to this class.Likewise .cont-img { width:400px; display:table; height:100%; position: relative; } – ExploreNav Aug 04 '16 at 09:59
want make it with width:100% and height:100%; and without any positions – Un1xCr3w Aug 15 '16 at 23:03
yes you can do it with width:100% ofcourse....or just past your fiddle link here, i'll do it .. – ExploreNav Aug 17 '16 at 11:37
nevermind buddy i did it :) thanks allot for ur support xD – Un1xCr3w Aug 21 '16 at 10:35

S.Valentine · Answer 4 · 2016-08-03T15:19:06.563

Add a height:400px to .cont-img class. Then you can use absolute position and css transform to centralize your content as seen in https://css-tricks.com/centering-percentage-widthheight-elements/ .

.centered-items {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Check out this JSfiddle for more. I also added display flex css in the fiddle in case you changed your mind.

For more information on css flexbox, you could visit https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Centering elements in absolutely-positioned parent

4 Answers4

CSS Positioning Method

CSS Flexbox Method