Centering HTML Elements – How to Center Elements in CSS
Below are helpful techniques for centering HTML elements.
Center Block Elements Horizontally
You can center a block-level element horizontally within its container by setting the element's margin
to auto
.
- The element's width must be less than its container's width for the centering to be visible.
- The
margin: auto
centering technique does not work on inline elements.
Here's an example:
- CSS
- HTML
section {
background-color: orange;
width: 100%;
height: 400px;
}
div {
margin: auto;
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
width: 50px;
height: 50px;
}
<section>
<div></div>
</section>
A margin: auto
declaration tells browsers that after the selected element has occupied its apportioned width, they should:
- Automatically share the extra horizontal space equally between the left and right margins.
- Automatically set the top and bottom margins to zero (
0
).
The margin: auto
property is a shorthand for margin: 0 auto
.
Center Inline Elements Horizontally
You can center an inline-level element horizontally by setting its container's text-align
property to center
.
Here's an example:
- CSS
- HTML
section {
text-align: center;
background-color: orange;
width: 100%;
height: 400px;
margin-top: 70px;
}
span {
border: 1px solid black;
background-color: purple;
color: white;
padding: 30px;
border-radius: 5px;
}
<section>
<span></span>
</section>
Center Text Horizontally
You can center an HTML text horizontally by setting its container's text-align
property to center
.
Here's an example:
- CSS
- HTML
div {
text-align: center;
height: 400px;
border: 1px solid black;
background-color: purple;
color: white;
border-radius: 5px;
width: 250px;
}
<div>CodeSweetly</div>
Center Any Element Horizontally with Flexbox
You can center any element horizontally within its container by:
- Setting its container's
display
property toflex
- Setting the flexible container's
justify-content
property tocenter
Here's an example:
- CSS
- HTML
section {
display: flex;
justify-content: center;
background-color: orange;
width: 100%;
height: 400px;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
width: 50px;
height: 50px;
}
<section>
<div></div>
</section>
Center Any Element Horizontally with position
, top
, left
, and transform
You can center any HTML element horizontally within its container by:
- Setting its container's
position
property torelative
- Setting the element's
position
property toabsolute
- Moving the element
50%
away from its container'sleft
edge - Setting the element's
transform
property totranslateX(-50%)
Here's an example:
- CSS
- HTML
section {
position: relative;
background-color: orange;
width: 100%;
height: 400px;
}
div {
position: absolute;
left: 50%;
transform: translateX(-50%);
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
width: 50px;
height: 50px;
}
<section>
<div></div>
</section>
Center Block Elements Vertically
You can center a block-level element vertically using the same value for its container's top and bottom padding
.
The padding technique works if you do not define a height
property for the element's container (parent element).
Here's an example:
- CSS
- HTML
section {
padding: 150px 0;
background-color: orange;
width: 100%;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
width: 50px;
height: 50px;
}
<section>
<div></div>
</section>
Center Text Vertically
You can center an HTML text vertically by using the same value for its container's height
and line-height
properties.
Here's an example:
- CSS
- HTML
div {
height: 400px;
line-height: 400px;
border: 1px solid black;
background-color: purple;
color: white;
border-radius: 5px;
width: 250px;
}
<div>CodeSweetly</div>
Center Any Element Vertically with Flexbox
You can center any element vertically within its container by:
- Setting its container's
display
property toflex
- Setting the flexible container's
align-items
property tocenter
Here's an example:
- CSS
- HTML
section {
display: flex;
align-items: center;
background-color: orange;
width: 100%;
height: 400px;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
width: 50px;
height: 50px;
}
<section>
<div></div>
</section>
Center Any Element Vertically with position
, top
, left
, and transform
You can center any HTML element vertically within its container by:
- Setting its container's
position
property torelative
- Setting the element's
position
property toabsolute
- Moving the element
50%
away from its container'stop
edge - Setting the element's
transform
property totranslateY(-50%)
Here's an example:
- CSS
- HTML
section {
position: relative;
background-color: orange;
width: 100%;
height: 400px;
}
div {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
width: 50px;
height: 50px;
}
<section>
<div></div>
</section>
Center Block Elements Horizontally and Vertically with CSS margin
and padding
Properties
You can center a block-level element horizontally and vertically within its container by:
- Using the same value for its container's top and bottom
padding
- Setting the element's
margin
toauto
Here's an example:
- CSS
- HTML
section {
padding: 150px 0;
background-color: orange;
width: 100%;
}
div {
margin: auto;
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
width: 50px;
height: 50px;
}
<section>
<div></div>
</section>
This technique works if:
- You do not define a
height
property for the element's container (parent element) - The element's width is less than its container's width
- The element is not inline
Use the CSS padding
and text-align
properties to horizontally and vertically center inline elements.
Center Inline Elements Horizontally and Vertically with CSS padding
and text-align
Properties
You can center an inline-level element horizontally and vertically within its container by:
- Using the same value for its container's top and bottom
padding
- Setting its container's
text-align
property tocenter
Here's an example:
- CSS
- HTML
section {
padding: 150px 0;
text-align: center;
background-color: orange;
width: 100%;
}
span {
border: 1px solid black;
background-color: purple;
color: white;
padding: 30px;
border-radius: 5px;
}
<section>
<span></span>
</section>
Center Text Horizontally and Vertically
You can center an HTML text horizontally and vertically by:
- Setting its container's
text-align
property tocenter
- Using the same value for its container's
height
andline-height
properties
Here's an example:
- CSS
- HTML
div {
text-align: center;
height: 400px;
line-height: 400px;
border: 1px solid black;
background-color: purple;
color: white;
border-radius: 5px;
width: 250px;
}
<div>CodeSweetly</div>
Center Any Element Horizontally and Vertically with Flexbox
You can center any HTML element horizontally and vertically within its container by:
- Setting its container's
display
property toflex
- Setting the flexible container's
justify-content
andalign-items
properties tocenter
Here's an example:
- CSS
- HTML
section {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
width: 100%;
height: 400px;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
width: 50px;
height: 50px;
}
<section>
<div></div>
</section>
Center Any Element Horizontally and Vertically with position
, top
, left
, and transform
You can center any HTML element horizontally and vertically within its container by:
- Setting its container's
position
property torelative
- Setting the element's
position
property toabsolute
- Moving the element
50%
away from its container'stop
edge - Moving the element
50%
away from its container'sleft
edge - Setting the element's
transform
property totranslate(-50%, -50%)
Here's an example:
- CSS
- HTML
section {
position: relative;
background-color: orange;
width: 100%;
height: 400px;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
width: 50px;
height: 50px;
}
<section>
<div></div>
</section>
Center Any Element Horizontally and Vertically with position
, inset
, and margin
You can center any HTML element horizontally and vertically within its container by setting:
- Its container's
position
property torelative
- The element's
position
property toabsolute
- The element's
inset
property to0
- The element's
margin
property toauto
Here's an example:
- CSS
- HTML
section {
position: relative;
background-color: orange;
width: 100%;
height: 400px;
}
div {
position: absolute;
inset: 0;
margin: auto;
border: 1px solid black;
background-color: purple;
color: white;
padding: 20px;
border-radius: 5px;
width: 50px;
height: 50px;
}
<section>
<div></div>
</section>
Overview
This article discussed how to center HTML elements. We also used examples to see how it works.