How to align content vertically and horizontally CSS/HTML
One of the ways to align content is to use flex.
To learn how to align the content we need to create html with content:
<div class="flexbox">
<div class="flex-content">flex-content</div>
</div>
End add some initial css properties:
.flexbox {
width:500px;
height:200px;
background: #8ba4f9;
}
The .flexbox
class must be defined as a block flex container, for this we will write the following properties:
.flexbox {
display: flex;
}
To align the content vertically, we should set the .flexbox class to the align-items property, with the value center:
.flexbox {
align-items: center;
}
To align the content horizontally, set the .flexbox class to justify-content , with the value center:
.flexbox {
justify-content: center;
}
Therefore, in order to align content vertically and horizontally using flex, you need to write these properties:
.flexbox {
width:500px;
height:200px;
background: #8ba4f9;
display: flex;
align-items: center;/* vertical alignment of content */
justify-content: center;/* content horizontal alignment */
}
See the Pen Align content vertically and horizontally with flex by Comfort Dev (@comfortdev) on CodePen.