Zentriert div vertikal und horizontal in einem anderen div

Question

Wenn Sie die Größe des Ergebnisbereichs anpassen, um ihn schmaler zu machen, werden Sie sehen, dass der Bildbereich entsprechend angepasst wird.

Ich hoffe, dass der Text immer vertikal und horizontal zentriert wird, wenn eine solche Größenänderung auftritt.

Ich bin nicht in der Lage, die richtige css dafür zu finden.

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

ist die jsfiddle Beispiel: https://jsfiddle.net/mddc/4tx5h1tq/34/

Vielen Dank für jede Hilfe!

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

Haben Sie in Betracht gezogen using flexbox? Es wird genau das tun, was Sie wollen, mit minimalen Änderungen.

.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

Sie sind in der Lage, die gleiche Sache mit weniger Code zu tun.

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/