CODEWITHSUNDEEP
htmlcssflexbox
Un1xCr3w
Un1xCr3w

Reputation: 153

Centering elements in absolutely-positioned parent

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.

Upvotes: 2

Views: 99

Answers (4)

Michael Benjamin
Michael Benjamin

Reputation: 371251

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:

  1. 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:

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

Upvotes: 2

S.Valentine
S.Valentine

Reputation: 33

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/

Upvotes: 1

ExploreNav
ExploreNav

Reputation: 396

Just give height to cont-img class like below

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

Upvotes: 1

Rinto Antony
Rinto Antony

Reputation: 297

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>

Upvotes: 1

Related Questions