Wie positioniert man Text und Div übereinander und richtet sie in der Mitte aus?

Question

So kann ich das nicht herausfinden. Ich versuche, eine rote vertikale Box in der Mitte der Seite anzuzeigen. Ich habe den Div-Rand auf auto eingestellt. Und dann gibt es ein anderes Div, das einen zentrierten Text enthält. Einstellung der Randautomatik auf beiden Seiten. Sie sind beide übereinander in der Mitte der Seite.

Allerdings möchte ich es auf alle Höhen zu reagieren. Im Moment reagiert es nur auf die X-Achse und nicht auf die Höhe.

HTML & CSS:

.parentDiv { 
 
    position: relative; 
 
    width: 250px; 
 
    height: 450px; 
 
    margin: auto; 
 
} 
 
#RedBox { 
 
    width: 250px; 
 
    height: 450px; 
 
    background-color: #FF0000; 
 
    margin: auto; 
 
} 
 
#CSText { 
 
    position: absolute; 
 
    top: 45%; 
 
    width: 250px; 
 
    color: black; 
 
    text-align: center; 
 
}

<div class="parentDiv" style="margin-top: auto;"> 
 
    <div id="CSText" class="TextAlignCenter"> 
 
    </div> 
 
    <div id="RedBox"> 
 
    </div> 
 
</div>

Answer 1

flexbox wäre eine große Lösung sein:

.container { 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.red-box { 
 
    background-color: red; 
 
    padding: 100px; 
 
    color: white; 
 
}

<div class="container"> 
 
    <div class="red-box">text</div> 
 
</div>

Answer 2

Ich habe das für dich gemacht. https://jsfiddle.net/95ssv6q1/

HTML

<div class="parentDiv"> 
    <div class="inner"> 
    <div id="RedBox"> 
    </div> 
    </div> 
</div> 

CSS

.parentDiv { 
    display:table; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 
.inner{ 
    display: table-cell; 
    vertical-align:middle; 
} 
#RedBox { 
    width: 250px; 
    height: 450px; 
    background-color: #FF0000; 
    margin: auto; 
}