Center div vertically and horizontally inside another div

Question

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 JS Fiddle example.

Michael Benjamin · Accepted Answer · 2016-08-15T03:29:44.893

.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

score 1 · Answer 2 · answered Aug 15 '16 at 02:31

1

Have you considered using flexbox? It will do exactly what you want it to do, with minimal changes.

.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: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.text p {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
}
.img {
  width: 100%;
  height: auto;
}

answered Aug 15 '16 at 02:31

Joah Gerstenberg

441
2
7

Thanks for chiming in! I tested your solution. It correctly positions text vertically. However, horizontally, it is not when the image area is narrowed. You can shorten the text to "This is text" and see the position of the text when the image responsively shrinks. – curious1 Aug 15 '16 at 02:59
That's only because you have `margin-left: -150px` on `.holders`. If you take that off, [it doesn't do that anymore](https://jsfiddle.net/4tx5h1tq/37/) – Joah Gerstenberg Aug 15 '16 at 03:04
This whole html structure reflects that of an actual page. I have to center the responsive image plus text. Thanks for help! – curious1 Aug 15 '16 at 03:23

score 1 · Answer 3 · answered Aug 15 '16 at 13:39

You are able to do the same thing with less code.

HTML

<div class="center">
  <p class="text">This is text that should be in the center of the block vertically and horizontally</p>
</div>

CSS

.center {
    -webkit-align-items: center;
    -webkit-justify-content: center;
    align-items: center;
    background: url('http://www.fnordware.com/superpng/pnggrad8rgb.png');
    display: -webkit-flex;
    display: flex;
    height: 300px;
    justify-content: center;
    width: 300px;
}

LINK

https://jsfiddle.net/4tx5h1tq/42/

Center div vertically and horizontally inside another div

3 Answers3