curious1 curious1 - 3 months ago 11
CSS Question

Center div vertically and horizontally inside another div

If you resize the results pane to make it narrower, you will see that the image area will be resized responsively.

I am hoping to make the text always centered vertically and horizontally when such resizing happens.

I am not able to find the right css for this.



.holders {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -150px; /*half of image width*/
}
.holder {
float: left; /*this cannot be changed because we have a row of blocks like the example one in the bottom*/
position: relative;
}
.text {
position: absolute;
top: 150px;
/*this is not right at this moment*/
}
.img {
width: 100%;
height: auto;
}

<div style="position: fixed;top:0;left:0;width:100%;height:100%">
<div class="holders">
<div class="holder">
<div class="text">
This is text that should be in the center of the block vertically and horizontally
</div>
<img class="img" src="http://www.fnordware.com/superpng/pnggrad8rgb.png" />
</div>
</div>
</div>





Here is the jsfiddle example: https://jsfiddle.net/mddc/4tx5h1tq/34/

Thanks for any help!

Answer

.holders {
  position: absolute;
  bottom: 0;
  left: 50%;
  /* margin-left: -150px; */
  transform: translateX(-50%);        /* see comments below */
}
.holder {
  float: left;
  position: relative;
}
.text {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;                           /* center text vertically */
  left: 50%;                          /* center text horizontally */
  transform: translate(-50%, -50%);   /* horizontal & vertical centering fine-tuning; 
                                         http://stackoverflow.com/a/36817384/3597276 */
}
.img {
  width: 100%;
  height: auto;
}
<div style="position: fixed;top:0;left:0;width:100%;height:100%">
  <div class="holders">
    <div class="holder">
      <div class="text">
        This is text that should be in the center of the block vertically and horizontally
      </div>
      <img class="img" src="http://www.fnordware.com/superpng/pnggrad8rgb.png" />
    </div>
  </div>
</div>

Revised Fiddle

Comments