Vertically centering using flex (flexbox)
This output
Some text
is generated from the following HTML and CSS code:
<div class="page">
<div class="outer">
<div class="inner">
Some text
</div>
</div>
</div>
<style>
.page {
display: flex;
border: 5px solid forestgreen;
}
.outer {
flex: 1;
display: flex;
flex-direction: row;
height: 300px;
width: 300px;
border: 3px solid crimson;
}
.inner {
display: flex; /* re-starts flex layout */
flex-direction: column; /* vertically in a column */
justify-content: center; /* center-align children vertically*/
text-align: center; /* horizontal center alignment */
width: 100%; /* nec for text-alignment */
}
</style>
Last update: 2023-03-18 09:39:42 +0000