# How to center a div?
Español | English
Centrally aligning a div in HTML and CSS is a common task in the web design. A div can encapsulate any content you wish to center, such as text, images, or videos, so when creating a web page, it's often desirable to position a div in the center of the page or another container element for the div. The container is the parent element of the div and is used to align the div in its center. The container can be any HTML element, but the body element is the commonly employed. In this article, we will explore various methods for centering a div using HTML and CSS.
# 1. Utilizing the CSS Flexible Box Layout (flexbox) for axis alignment
The CSS property display: flex is employed to create a flexible container that automatically adapts to the content's size. To center a div using flexbox, we merely need to apply the display: flex property to the container, along with the axis alignment properties justify-content: center; and align-items: center;. This obviates the necessity to explicitly define the child element's alignment, as the parent container itself takes charge of positioning the child element.
<div class="flexbox-align">
<div class="flexbox-align__content">
flexbox align
</div>
</div>
.flexbox-align {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 200px;
background: #ffff99;
color: #333;
}
.flexbox-align__content {
}
This technique enables us to explore all the alignment possibilities that flexbox provides regarding both the primary and secondary axes.
# 2. Applying CSS Flexible Box Layout (flexbox) with automatic content margin
The combination of the CSS properties display: flex and margin: auto allows the browser to adapt the child element to the container's size. To center a div using flexbox and automatic margins, we simply apply the display: flex property to the container and, on the other hand, the margin: auto property to the content. This will automatically center the div within the container.
<div class="flexbox-margin-auto">
<div class="flexbox-margin-auto__content">
flexbox margin auto
</div>
</div>
.flexbox-margin-auto {
display: flex;
height: 100px;
width: 200px;
background: #ffff99;
color: #333;
}
.flexbox-margin-auto__content {
margin: auto;
}
# 3. Employing CSS Grid Layout (grid)
The CSS property display: grid is used to create a two-dimensional grid for flexible content organization. To center a div using grid, you merely need to apply the display: grid property to the container, along with the axis alignment property place-items: center;, and, on the other hand, apply the margin: auto property to the div. This will automatically center the div within the container.
<div class="grid">
<div class="grid__content">
grid
</div>
</div>
.grid {
display: grid;
place-items: center;
height: 100px;
width: 200px;
background: #ffff99;
color: #333;
}
.grid__content {
margin: auto;
}
# 4. Utilizing transformations to alter the coordinate space.
The CSS property transform: translate() is employed to rotate, scale, skew, or move an element in a specific direction. We will leverage this feature to center the div.
To center a div using transformation, we'll add the property position: absolute to both the container and child elements, and apply the properties left: 50% and top: 50% to the child element to position the div in the center of the container. Then, we use the transform: translate() property to adjust the top-left coordinates of the div, moving it left and upwards:
<div class="transform">
<div class="transform__content">
transform
</div>
</div>
.transform {
position: relative;
height: 100px;
width: 200px;
background: #ffff99;
color: #333;
}
.transform__content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
This technique should be applied with caution, as when using absolute positioning, we are removing the element from the page flow, which can lead to unintended element overlap.
# 5. Horizontal centering
If you solely desire to center a div horizontally, in addition to using variations of the techniques mentioned earlier, you can also utilize the CSS property margin with the values auto and 0. To employ this method, you must specify a fixed width for the div. If the div's width is less than that of the container, the div will automatically center. In this example, I have set the width property of the child element to 50% to make the div occupy half the width of the container. The margin property sets the top and bottom margins to 0 and the left and right margins to auto. This signifies that the browser will automatically compute the side margins to center the div horizontally.
<div class="horizontal">
<div class="horizontal__content">
horizontal horizontal horizontal horizontal
</div>
</div>
.horizontal {
height: 100px;
width: 200px;
background: #ffff99;
color: #333;
}
.horizontal__content {
width: 50%;
margin: 0 auto;
}
# 6. Vertical centering using table layout
Vertical centering is slightly more intricate than horizontal centering, but there are various methods to achieve it. One common approach is to use the display property with a value of table-cell and then set the vertical-align property to middle. In this example, we will set the display property to table for the container element. This instructs the browser to treat it as a table, enabling us to use the table-cell property on the child div. The vertical-align property is set to middle to achieve vertical centering.
<div class="vertical-table">
<div class="vertical-table__content">
vertical table
</div>
</div>
.vertical-table {
display: table;
height: 100px;
width: 200px;
}
.vertical-table__content {
display: table-cell;
vertical-align: middle;
background: #ffff99;
color: #333;
}
And by incorporating centered text alignment (using the text-align property), we achieve complete content centering within the container:
.vertical-table-center {
display: table;
height: 100px;
width: 200px;
}
.vertical-table-center__content {
display: table-cell;
vertical-align: middle;
text-align: center;
background: #ffff99;
color: #333;
}
# 7. Absolute vertical centering
Another way to vertically center a div is by using the position property with a value of absolute, setting margins to auto, and the properties top, right, bottom, and left to 0. In this example, we will set the position property to relative for the container element, for which we must also define the height property (if it were the body element, you'd use the value 100vh to occupy the entire height of the browser window). By default, this will cause the content div to expand to the container's boundaries, so our content div should have a defined size smaller (or relative) to its container for complete centering. To ensure the text in this example also appears centered within the content div, we will add centered text alignment (the text-align property).
<div class="vertical-absolute">
<div class="vertical-absolute__content">
vertical absolute
</div>
</div>
.vertical-absolute {
position: relative;
height: 100px;
width: 200px;
background: #ffff99;
color: #333;
}
.vertical-absolute__content {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
height: 50px;
width: 100px;
}