In this article, we'll demonstrate four simple techniques for centering a div container or text line both horizontally and vertically using CSS. These four methods are easy to use.
So, let's get started.
Top 4 Ways for Vertically and Horizontally Centering a Div
1. Using a display grid + place items
Using CSS Grid, we can easily center any element with just two lines of code. To center an element, we set its parent element with the "display: grid" and "place-items: center" properties.
The "display: grid" makes the parent a grid, and "place-items: center" positions the item in the center both horizontally and vertically. This property combines "align-content" (for vertical centering) and "justify-content" (for horizontal centering) into one, simplifying the process.
<head>
<style>
.parent {
height: 100vh;
display: grid;
place-items: center;
}
.child {
background-color: steelblue;
height: 150px;
width: 150px;
/* margin: auto; */
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
If you use the "margin: auto" property on the child element instead of "place-items", it will still center the element. However, it's crucial to apply "margin: auto" to the child element, not the parent.
It is important to note that this method will only work if you have specified the width and height of the child elements.
2. Using CSS display flex + margin auto
With CSS flex, centering any element is a breeze with only two lines of code. To achieve centering, set the parent element to "display: flex" and apply "margin: auto" to its child element.
By setting the parent as "display: flex," it becomes a flex container while applying "margin: auto" to the child element ensures it's centered both horizontally and vertically.
<head>
<style>
.parent {
height: 100vh;
display: flex;
}
.child {
background-color: thistle;
margin: auto;
height: 150px;
width: 150px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
If you apply the "display: flex" and "place-item: center" properties to the parent element, the element will only center vertically, not horizontally. The "place-item: center" property is effective when the element is set to "display: grid".
It is important to note that this method will only work if you have specified the width and height of the child elements.
3. Using table cell + display inline block
Developers often overlook the versatility of the "display: table-cell" property for centering content and elements within a container.
To center elements using this method, apply "display: table-cell" to the parent element, treating it as a table cell. Ensure that the parent element has its height and width specified for effective centering of the inner element.
Next, set the "text-align: center" and "vertical-align: middle" properties on the parent element to center the element both horizontally and vertically. Finally, set the child element to "display: inline-block" to complete the centering process.
<head>
<style>
.parent {
display: table-cell;
height: 100vh;
width: 100vw;
text-align: center;
vertical-align: middle;
}
.child {
display: inline-block;
height: 150px;
width: 150px;
background-color: rosybrown;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
4. Using position absolute + margin auto
To center any element using the "position: absolute" method, follow these steps:
- Set the element's position to absolute.
- Assign a value of 0 to the top, bottom, left, and right properties.
- Apply "margin: auto" to the element to achieve centering.
It's important to note that in this method, only the child element is styled, and the parent element remains unaffected. Additionally, the parent element's default height is set to absolute.
<head>
<style>
div {
width: 150px;
height: 150px;
background-color: skyblue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div></div>
</body>
Top 4 Ways for Vertically and Horizontally Centering Text Within a Div
1. Using Text-Align property for horizontal center
As the name suggests, "text-align: center" can be utilized to horizontally center text. Similarly, you can employ this property to horizontally center images as well.
In the following example, we've demonstrated the horizontal centering of both text and images to help clarify the concept.
<head>
<style>
.center-text {
font-size: 20px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div class="center-text">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione, nostrum.</p>
<img src="https://media.istockphoto.com/id/1295274245/photo/random-multicolored-spheres-computer-generated-abstract-form-of-large-and-small-balls-3d.jpg?s=612x612&w=0&k=20&c=q7NOl28YxIIOqKu6em50VlKrg6ISFyVww_nLOCr5W_A="
height="200px" alt="">
</div>
</body>
2. Using the Justify-Content property for horizontal center
The "justify-content" property enables horizontal text centering, but only when the same element has "display: flex." Without "display: flex," the text won't be centered.
In this example, we'll create a div element similar to the one shown above. To turn the div into a flex container, we'll set its display property to flex, and justify-content property to center.
<head>
<style>
.center-text {
display: flex;
font-size: 20px;
border: 1px solid black;
justify-content: center;
}
</style>
</head>
<body>
<div class="center-text">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione, nostrum.</p>
</div>
</body>
3. Using the Padding property for vertical center
By employing the padding property, we can center text vertically. The text utilizes the padding property to define two values: one for top and bottom, and one for left and right. The initial value can be either a positive length or a percentage to achieve centering, while the second value should be set to 0.
<head>
<style>
.center-text {
font-size: 20px;
display: flex;
border: 1px solid black;
padding: 100px 0;
}
</style>
</head>
<body>
<div class="center-text">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione, nostrum.</p>
</div>
</body>
After demonstrating how to horizontally center text with two properties, you may be wondering about vertical centering. To achieve this, set "justify-content: center" in the container of the first element. This will vertically center the text, allowing for both vertical and horizontal text centering.
4. Using the Align-Items property for vertical center
The "align-items" property facilitates vertical text centering. By applying "display: flex" and adjusting the element's height, you can vertically center the text. If the height isn't specified and "align-items" is used alone, the centering will match the default height of the element.
<head>
<style>
.center-text {
display: flex;
font-size: 20px;
border: 1px solid black;
height: 50vh;
align-items: center;
}
</style>
</head>
<body>
<div class="center-text">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione, nostrum.</p>
</div>
</body>
Conclusion
To center any div or text within another div, you can select any one of the top 4 methods given above. However, many developers use the display grid + place item to center the div horizontally and vertically.
If you have any questions about this article or related to web development, feel free to ask us using the question box provided below.