AppCode
Contribute and help us stay up-to-date. Edit this page on GitHub.
CSS is one of the three core technologies of the World Wide Web, along with HTML and JavaScript. No modern website is complete without CSS because CSS defines the presentation of the user interface.
Though it seems easy, CSS is quite tough to implement in real-time. The reason is that CSS is huge and has many concepts. Moreover, every challenge has more than one solution, sometimes several. Even experienced developers sometimes struggle while implementing CSS.
One of the common challenges in CSS is to center an element. If you have ever worked with CSS, you likely faced a situation where a div element or a heading needs to be centered. And many developers struggle in doing this simple task. One of the primary reasons for this is that developers do not give enough time to learn the tricks for centering elements using CSS. So in this article, we will provide different ways of centering a div or centering other elements inside a div using CSS.
There are different ways to center a div or center elements inside a div. This can include centering a div on the screen or center elements such as paragraphs, headings, or images inside a div. We can do it horizontally, vertically, or both horizontally or vertically. So let’s discuss each of these ways one by one.
One of the easiest ways to center a div horizontally is by using the margin property. Observe the following div element.
The green circle is the div element and currently, it is not centered. Following is the HTML for the above.
<html>
<body class="body-css">
<div class="div-css"></div>
</body>
</html>
And following is the CSS.
.body-css {
border: 2px solid black;
padding: 60px;
}
.div-css {
width: 200px;
height: 200px;
background-color: green;
border-radius: 50%;
}
To center this div horizontally, we can use the margin property and set auto as its value.
.body-css {
border: 2px solid black;
padding: 60px;
}
.div-css {
width: 200px;
height: 200px;
background-color: green;
border-radius: 50%;
margin: auto;
}
With margin as auto, the div will be centered with respect to its parent element, i.e. body.
Using flex, we can align the div horizontally, vertically, or both. We have to apply the flex as the value of the display property in the parent element. Then, we have to use the justify-content and align-items property in the parent element as well and both of them should have center as their values.
.body-css {
border: 2px solid black;
padding: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.div-css {
width: 200px;
height: 200px;
background-color: green;
border-radius: 50%;
}
This way is also useful when we want to center any element inside a div. Observe the following HTML.
<html>
<body class="body-css">
<div class="div-css">
<h3>Hello World!</h3>
</div>
</body>
</html>
To center the h3 element, we have to apply the flex to its parent element i.e. div. Yes, we have already applied flex to the body element and there is no problem in applying the flex again.
.body-css {
border: 2px solid black;
padding: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.div-css {
width: 200px;
height: 200px;
background-color: green;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
Remember, the justify-content property will center the element horizontally while align-items will center vertically.
Using text-align property is the most common way to center a text. In the above example, we centered the h3 element inside the div using the flex, which was also used to center the div itself. Instead of using flex to center the h3 element, let’s try the text-align property.
.body-css {
border: 2px solid black;
padding: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.div-css {
width: 200px;
height: 200px;
background-color: green;
border-radius: 50%;
text-align: center;
}
But there is one problem. The text-align property will only center the element horizontally.
So, we can use the text-align property, if it is required to center the text horizontally only.
Another way to center an element to its nearest parent element is by using the transform property. In this technique, we give the parent a relative position and absolute to the child. Then, we provide top, left, and transform properties to the child element with necessary values.
.body-css {
border: 2px solid black;
padding: 120px;
position: relative;
}
.div-css {
width: 200px;
height: 200px;
background-color: green;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Remember, the top and left property values should always be 50% while translate should be used for the transform property.
The grid system is relatively new, and you can use it to center elements in CSS. In this technique, we have to set grid as the value of display in the parent element and define rows and columns. Then, we can use justify-self and align-self properties in the child element and set their values as center.
.body-css {
border: 2px solid black;
display: grid;
grid-template-rows: 80vh;
grid-template-columns: 100vw;
}
.div-css {
width: 200px;
height: 200px;
background-color: green;
border-radius: 50%;
justify-self: center;
align-self: center;
}
So centering elements using CSS is not challenging, and you only need to have the correct understanding of specific CSS properties and their values. In this article, we discussed five ways to center a div or center other elements in a div both horizontally and vertically.
Here is a link to a relatively more advanced example of a centered nested DIV element on codepen.io.
- How to Create a Responsive Flexbox Grid
- The CSS transform Property
- A Guide on How To Use CSS Grids for Layouts
- How To Align an HTML List Side by Side