How to Center a Div Element in CSS
There are some different ways of centering a div element in CSS. We can center a div element horizontally, vertically, or both horizontally and vertically. Compared to centering a div vertically on a page, it is much easier to center it horizontally. Before we explain how to center a div on a page, let us look at what a div element is. Every HTML has a default display value depending on the type of the element. There are basically two display values: block-level elements and inline elements. Div is an example of block-level elements. If we center a div element in CSS, we can give style to blocks of content on a page.
Sometimes it is not the text but a block as a whole or an image that needs to be centered. When we want the left and right margin to be equal, we set the margin property to auto.
Centering a Block or Image
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 8em
}<P class="blocktext">This block text is centered…This block of text is centered.
Note that the lines inside
the block is not centered
(they are left-aligned).
We use the same way when we center an image. We make it into a block of its own and apply the margin properties to it. Here is an example:
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}<IMG class="displayed" src="..." alt="...">
Centering a Div Vertically and Horizontally
While centering a div vertically and horizontally on a page, you should set the position of the div to absolute. Then, you need to set the left and top properties to 50%. By doing this, the browser will line up the top and left edge of the div with the center of the page vertically and horizontally. However, the steps are not over yet. To center the div properly, you also need to define the transform property. You should move the div 50% to the left and up from its current position. As a result, the center of the div will take place in the center of the page.
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate (-50%, -50%);
border: 5px solid #FFFF00;
padding: 10px;
}Here is the HTML:
<div class=”center”><p>This div is horizontally and vertically centered. </p></div>
Time needed: 35 minutes.
Let’s wrap up what we have covered so far:
- Regular Centering
When we want the left and right margin to be equal, we set the margin property to auto.
- Centering a Div Vertically and Horizontally
While centering a div vertically and horizontally on a page, you should set the position of the div to absolute.
FAQs on Centering Div in CSS
You can center a div in three different ways. When the width and height of the div elements are known, you can use the position, left, top, and margin properties to center a div horizontally and vertically. When you do not know the width and height, you can use the transform property as well as position, top, and left properties. Finally, you can center a div using flexbox.
If you use vertical-align: middle; to center align text inside a div, it will not work. You just need to apply the line-height property with a value equal to the height of div. You can also use the padding property.
To do this, you can use the CSS position, top, and transform property. Set the position of the div to absolute. After that, set the top property to 50%. The browser will line up the top edge of the div with the center of the page vertically.
To the center, a div horizontally sets the width of the element and the margin property to auto. In this way, the div will take up the width specified in CSS, and the browser will split the remaining space equally between the two margins.
If you know how to center a div, the content will not stretch out to the edges of its container. It will not overlap with the other elements on the page. Therefore, it is a valuable skill, especially for beginner programmers.
Conclusion on Centering a Div Element in CSS
In this article, we have explained how to center a div element (block or image) in CSS. We have also talked about how to center a div element in CSS and the ways of doing it horizontally, vertically, and both horizontally, and vertically. Also, we have covered how to center a div within a div and to center text vertically in a div. We hope you find this article helpful! By the way, if this wasn’t enough to satisfy your curiosity, then go ahead and read our guide on how to load CSS asynchronously.
The post How to Center a Div Element in CSS is republished from Dopinger Blog
Yorumlar
Yorum Gönder