How to Center a Div Horizontally in CSS
-
Use the
margin
Property to Center adiv
Horizontally in CSS -
Use Flexbox to Center a
div
Horizontally in CSS -
Set the
div
toinline-block
and Use thetext-align
Property to Center It Horizontally in CSS
The article will discuss a few ways to horizontally center a div
in CSS.
Use the margin
Property to Center a div
Horizontally in CSS
Using the margin
property, we can center a div
horizontally in CSS.
The margin
property is a shorthand to set the margins of all the four directions from an element. We can use the property to assign the margins to the top
, right
, bottom
, and left
in order.
We can use the auto
option for the left and the right margin to horizontally center a div
. The top and bottom margin can be set to 0
.
The auto
option will place the element in the center and divide equally divide the left and right margin. We should specify a width to the element to be centered.
The element will occupy the given width, and the remaining horizontal space will be split equally to the left and right.
Let’s take an example. If the width of an element is 50%
, the auto
property will create a left margin of 25%
and a right margin of 25%
.
We can also use the display
property to set the element to table
. There is no need to specify the width in such a case if there’s some content in the table.
The width of the content is used. When we do not write any content in the inner div
, we specify a certain width.
For example, create a div
wiith class name outerDiv
in HTML. Then, nest another innerDiv
inside the outerDiv
in HTML.
In CSS, set width
to 100%
and background
to blue
in the outerDiv
class. Next, select the innerDiv
and set the display
property to table
.
Set its background
to red
, height
and width
to 10vh
and 10vw
. Finally, set the margin
to 0 auto
.
Here, the 0
in the margin
property is the margin for the top and bottom. The auto
option is for the margin to left and right. We can center a div
horizontally using CSS’s margin
property.
Example Code:
<div class="outerDiv">
<div class="innerDiv"></div>
</div>
.innerDiv {
display: table;
background:red;
height:10vh;
width:10vw;
margin: 0 auto;
}
.outerDiv {
width:100%;
background:blue;
}
Use Flexbox to Center a div
Horizontally in CSS
We can use the flexbox properties to center a div
horizontally in CSS.
Flexbox provides a straightforward way to center an element vertically and horizontally. We can create flex and define how the elements are positioned in the flexbox.
The justify-content
property can be used to specify the horizontal position of the content inside the flexbox when the content does not take all of the available space. We can create a flexbox in the outer container and set the position of the inner container to the center using the justify-content
property.
For example, select the innerDiv
class and set the height
and width
properties to 10vh
and 10vw
. Set the color black
as the background color. Next, select the outerDiv
class and give the width
to 100%
.
Set its background color to 100%
. Then, create the container a flexbox by setting the display
property to flex
. After it, write the option center
to the justify-content
property.
Therefore, we can use the CSS Flexbox to center a div
horizontally in CSS.
Example Code:
.innerDiv {
background:black;
height:10vh;
width:10vw;
}
.outerDiv {
width:100%;
background:pink;
display: flex;
justify-content: center;
}
<div class="outerDiv">
<div class="innerDiv"></div>
</div>
Set the div
to inline-block
and Use the text-align
Property to Center It Horizontally in CSS
Another method of centering a div
horizontally in CSS is setting the div
as an inline-block
element. Just like inline, an inline-block
element does not start in the new line.
However, we can set the width
and height
. Then, we can use the text-align
property in the outer div
to center the inner div
horizontally.
The inner div
inherits the text-align
property from the outer div
, and the element can be centered.
For example, set some height, width, and background to the inner div
as the methods above. Then, use the display
property to set the element to inline-block
.
In the outer div
, set its width and background. Finally, set the text-align
property to center
.
In this way, we can center a div
horizontally in CSS.
Example Code:
.innerDiv {
background:red;
height:10vh;
width:10vw;
display:inline-block;
}
.outerDiv {
width:100%;
background:blue;
text-align:center;
}
<div class="outerDiv">
<div class="innerDiv"></div>
</div>
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn