This article will demonstrate seven various approaches to vertical and horizontal content centering using HTML and CSS, given in chronological sequence from the traditional approaches (which we usually omit now) to the contemporary approaches.
Using Table
In the early days, before a straightforward method for centering elements existed, we relied on tables as a workaround to achieve both vertical and horizontal centering. Although this approach was far from ideal, it was the only available option back then.
The concept involved creating a table with a sole cell and applying vertical and horizontal centering to that particular cell.
<table>
<tr>
<td>
Centered me
</td>
</tr>
</table>
table {
width: 100%;
height: 100%;
}
td {
vertical-align: center;
text-align: center;
}
Using position: relative, absolute, and offset values
One way to center a div is by utilizing the CSS position property. By setting the parent div to position: relative
and the child div to position: absolute
, along with appropriate offset values using top and left properties, we can achieve a centered effect.
<div class="parentContainer">
<div class="childContainer">center me</div>
</div>
.parentContainer {
background: tomato;
height: 300px;
width: 300px;
position: relative;
}
.childContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Using Flexbox and justify-content, align-items
CSS Flexbox provides powerful alignment capabilities. By applying display: flex
to the parent div and setting justify-content: center
and align-items: center
, we can easily center the child div both horizontally and vertically.
<div class="parentContainer">
<div class="childContainer">center me</div>
</div>
.parentContainer {
background: tomato;
height: 300px;
width: 300px;
display: flex;
justify-content: center;
align-items: center;
}
Using Flexbox and justify-content, align-self
Similar to the previous method, we can use Flexbox and justify-content: center
in the parent div. Additionally, setting align-self: center
for the child div allows individual alignment control along the cross-axis.
<div class="parentContainer">
<div class="childContainer">center me</div>
</div>
.parentContainer {
background: tomato;
height: 300px;
width: 300px;
display: flex;
justify-content: center;
}
.childContainer {
align-self: center;
}
Using Flexbox and Margin: auto
Flexbox, combined with margin auto, offers an efficient way to center a div. By applying display: flex
to the parent div and setting margin: auto
for the child div, the remaining space is evenly distributed, resulting in a centered effect.
Note: we can achieve the same result using display: grid
and margin: auto
as well
<div class="parentContainer">
<div class="childContainer">center me</div>
</div>
.parentContainer {
background: tomato;
height: 300px;
width: 300px;
display: flex;
}
.childContainer {
margin: auto;
}
Using CSS Grid and place-items
CSS Grid offers the place-items property, which allows setting both align-items and justify-items in a single declaration. By applying display: grid
to the parent div and setting place-items: center
, we can conveniently center the child div.
Except for Internet Explorer, All browser support place-items: center
property
<div class="parentContainer">
<div class="childContainer">center me</div>
</div>
.parentContainer {
background: tomato;
height: 300px;
width: 300px;
display: grid;
place-items: center;
}
Using CSS Grid and place-self
CSS Grid's place-self property combines both align-self and justify-self properties in a single declaration. Applying place-self: center
to the child div centers it both vertically and horizontally within the grid.
Except for Internet Explorer, All browser support place-self: center
property
<div class="parentContainer">
<div class="childContainer">center me</div>
</div>
.parentContainer {
background: tomato;
height: 300px;
width: 300px;
display: grid;
}
.childContainer {
place-self: center;
}
Conclusion
A useful and important skill is understanding how to center in CSS. In your work as a web developer, you will eventually need to utilize it.
In this blog post, we have explored 7 different methods to center a div using CSS. These techniques involve using the CSS position property, Table, Flexbox, and CSS Grid. By understanding and applying these methods, you can easily center div elements in your web development projects. You can experiment with these techniques to find the approach that best suits your needs.
Happy coding!