How to center text inside div in this specific situation? [duplicate] - css

Question

This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
How to center the text inside that box?
Here's how I want elements sorted out:
In a smaller screen, elements stack on top of each other, and the .text-box div, that contains the text I want to center, has a fixed height. For larger widths, the .text-box div should have a height igual to larger image's height minus shorter image's height
See the Fiddle here
HTML
<div id="wrapper">
<div class="box">
<img class="img-large" src="http://placekitten.com/900/800" alt=""/>
</div>
<div class="box">
<img src="http://placekitten.com/900/400" alt=""/>
</div>
<div class="box-text">
<div class="vcenter-outer">
<div class="vcenter-inner">
<p>center this text vertically</p>
</div>
</div>
</div>
</div>
CSS
#wrapper {
background: #ffeaea;
height: 100vh;
}
img {
width: 100%;
display: block;
}
.img-large {
height: 100vh;
width: auto;
}
.box {
position: relative;
width: 100%;
overflow: hidden;
}
.box-text {
text-align: center;
background: yellow;
height: 100%;
}
#media only screen and (min-width: 768px) {
.box {
float: left;
width: 50%;
}
}
.vcenter-outer {
background: yellow;
display: table;
}
.vcenter-inner {
background: lightblue;
display: table-cell;
vertical-align: middle;
}
Why does the .text-box div span through the whole wrapper?

Answer 1

Basicly You could use display:flex and float together
.trio {
height:100vh;
width:100vh;
}
.trio>div {
float:left;
display:flex;
align-items:center;
justify-content:center;
width:50vh;
height:50vh;
box-shadow:inset 0 0 0 2px;
}
.trio .first {
height:100vh;
}
<div class="trio">
<div class="first">
<p>Center</p>
</div>
<div class="next">
<p>Center</p>
</div>
<div class="next">
<p>Center</p>
</div>
</div>
display:table works too with an extra level of div inbricated as you did , same idea: float + vh
codepen to play with