Центр div вертикально и горизонтально внутри другого div

Question

Если вы измените размер панели результатов, чтобы сделать ее более узкой, вы увидите, что область изображения будет изменяться в зависимости от размера.

Я надеюсь, что текст будет всегда центрироваться по вертикали и горизонтали, когда произойдет такое изменение размера.

Я не могу найти нужное css для этого.

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

Вот jsfiddle пример: https://jsfiddle.net/mddc/4tx5h1tq/34/

Спасибо за любую помощь!

Answer 1

.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

Answer 2

Вы считаете using flexbox? Он будет делать то, что вы хотите, с минимальными изменениями.

.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; 
} 

Answer 3

Вы можете сделать то же самое с меньшим количеством кода.

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/