css vertical align using flexbox
html:
<div class="wrap">
<div class="centered">
<h3>centered block</h3>
<p>this block does not have height specified</p>
<p>max width specified as 50% of parent element</p>
<p>parent element have height specified 100vh = 100% of the viewport</p>
</div>
</div> |
<div class="wrap">
<div class="centered">
<h3>centered block</h3>
<p>this block does not have height specified</p>
<p>max width specified as 50% of parent element</p>
<p>parent element have height specified 100vh = 100% of the viewport</p>
</div>
</div>
css:
.wrap {
background: #cdf;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.centered {
background: #ffa;
max-width: 50%;
} |
.wrap {
background: #cdf;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.centered {
background: #ffa;
max-width: 50%;
}
css vertical align using display:table-cell
Should be set height and width in pixels. After adding "display:table-cell;" you can use "vertical-align:middle;"
<style>
.vertical-align {
background: #cdf;
height: 300px;
width: 300px;
display: table-cell;
vertical-align: middle;
}
</style> |
<style>
.vertical-align {
background: #cdf;
height: 300px;
width: 300px;
display: table-cell;
vertical-align: middle;
}
</style>
<div class="vertical-align">
vertically aligned text
</div> |
<div class="vertical-align">
vertically aligned text
</div>