How To Center Any HTML Element in CSS the Right Way — Works Every Time
Centering Elements in HTML is one of the most difficult things to do in HTML and CSS, and here is how to end your predicament once and for all.
Use the Right Tool For the Job
Use the Flex box in CSS. Define dimensions for the parent and use the Flex box. Its that simple, use the Flex box on the parent of the element you want to center. If you just want to center a single element and not all the elements of a parent, that is fine too. Just define the display as flex on the parent and then use the align-self property.
Lets get into it.
Lets say you have an Html code as below
<!DOCTYPE html>
<html>
<head>
</head><body><div>
<div>
<span>Hello World!</span>
</div>
</div></body></html>
In the code above you can see I have Two Divs and a span element that says Hello World!
Now what I want is the two Divs to be all centered to illustrate the centering of Divs and then I will center the text too to illustrate the centering of Text. Since the centering of Images in most approaches is the same as the centering of Divs.
But in the use of Flexbox, the approach is the same for all elements whether Text, Images or Divs.
To limit the procedures lets write our CSS in the same Html document
So add a Style Tag to the document and lets continue.
NB: The triple dots you see indicate that the code is been continued from previous code and has been minimized for clarity sake
...
<head>
<style>
</style>
</head>
...Lets give our first div the class cont and our second div the class sub-cont.
...<body><div class="cont">
<div class="sub-cont">
<span>Hello World!</span>
</div>
</div></body>...
Lets give them dimensions.
...
<head>
<style>
.cont {
width: 400px;
height: 400px;
background-color: white;
}.sub-cont {
width: 200px;
height: 200px;
background-color: dodgerblue;
}</style>
</head>
...
In the code above you can see I have also assigned colors to them for visual clarity
Now to center things horizontally the parent needs to have a width, to center them vertically the parent needs to have a height. For our first div, the body is the parent, we won’t have a problem if we don’t define a width but we won’t be able to center it vertically if we don’t define a height. So lets define dimension also for the body. And since we want to say 100% width for the body we will also need to define a 100% width for html, which is the first visual element in a web page. It will be a one liner
...
<style>
html,body {
height: 100%;
background-color: pink;
}.cont {
width: 400px;
height: 400px;
background-color: white;
}...
In the code above you can see I have also defined color for the body element
The Centering Code
When a Flex box is used, two properties affect its centering. One, horizontally and the other, vertically.
The align-items property aligns its children items horizontally, whereas, the justify-content arranges its children vertically. Use both for a perfect centering.
To center the first Div, set the display of the parent to flex and set its align-items and justify-content properties to center as seen below.
...
<style>
html,body {
height: 100%;
background-color: pink;
display: flex;
align-items: center;
justify-content: center;
}.cont {
width: 400px;
height: 400px;
background-color: white;
}...
Now you can see that the first Item has been centered both vertically and horizontally. This my friends is the way to center just about anything in simple steps. Now because the remaining parents have dimensions lets add our flex code to all of them to center everything that we have here.
...
<style>
html,body {
height: 100%;
background-color: pink;
display: flex;
align-items: center;
justify-content: center;
}.cont {
width: 400px;
height: 400px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
}.sub-cont {
width: 200px;
height: 200px;
background-color: dodgerblue;
display: flex;
align-items: center;
justify-content: center;
}</style>
...
Now everything is centered including the text.
Read more about flex box here
