Skip to content
Latest: Publish JavaScript Packages to NPM Like a Pro!

Centering HTML Elements – How to Center Elements in CSS

Below are helpful techniques for centering HTML elements.

You can center a block-level element horizontally within its container by setting the element’s margin to auto.

Here’s an example:

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;
}

Try it on StackBlitz

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).

You can center an inline-level element horizontally by setting its container’s text-align property to center.

Here’s an example:

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;
}

Try it on StackBlitz

You can center an HTML text horizontally by setting its container’s text-align property to center.

Here’s an example:

div {
text-align: center;
height: 400px;
border: 1px solid black;
background-color: purple;
color: white;
border-radius: 5px;
width: 250px;
}

Try it on StackBlitz

Center Any Element Horizontally with Flexbox

Section titled “Center Any Element Horizontally with Flexbox”

You can center any element horizontally within its container by:

  • Setting its container’s display property to flex
  • Setting the flexible container’s justify-content property to center

Here’s an example:

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;
}

Try it on StackBlitz

Center Any Element Horizontally with position, top, left, and transform

Section titled “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 to relative
  • Setting the element’s position property to absolute
  • Moving the element 50% away from its container’s left edge
  • Setting the element’s transform property to translateX(-50%)

Here’s an example:

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;
}

Try it on StackBlitz

You can center a block-level element vertically using the same value for its container’s top and bottom padding.

Here’s an example:

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;
}

Try it on StackBlitz

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:

div {
height: 400px;
line-height: 400px;
border: 1px solid black;
background-color: purple;
color: white;
border-radius: 5px;
width: 250px;
}

Try it on StackBlitz

Center Any Element Vertically with Flexbox

Section titled “Center Any Element Vertically with Flexbox”

You can center any element vertically within its container by:

  • Setting its container’s display property to flex
  • Setting the flexible container’s align-items property to center

Here’s an example:

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;
}

Try it on StackBlitz

Center Any Element Vertically with position, top, left, and transform

Section titled “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 to relative
  • Setting the element’s position property to absolute
  • Moving the element 50% away from its container’s top edge
  • Setting the element’s transform property to translateY(-50%)

Here’s an example:

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;
}

Try it on StackBlitz

Center Block Elements Horizontally and Vertically with CSS margin and padding Properties

Section titled “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 to auto

Here’s an example:

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;
}

Try it on StackBlitz

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

Center Inline Elements Horizontally and Vertically with CSS padding and text-align Properties

Section titled “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 to center

Here’s an example:

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;
}

Try it on StackBlitz

You can center an HTML text horizontally and vertically by:

  • Setting its container’s text-align property to center
  • Using the same value for its container’s height and line-height properties

Here’s an example:

div {
text-align: center;
height: 400px;
line-height: 400px;
border: 1px solid black;
background-color: purple;
color: white;
border-radius: 5px;
width: 250px;
}

Try it on StackBlitz

Center Any Element Horizontally and Vertically with Flexbox

Section titled “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 to flex
  • Setting the flexible container’s justify-content and align-items properties to center

Here’s an example:

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;
}

Try it on StackBlitz

Center Any Element Horizontally and Vertically with position, top, left, and transform

Section titled “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 to relative
  • Setting the element’s position property to absolute
  • Moving the element 50% away from its container’s top edge
  • Moving the element 50% away from its container’s left edge
  • Setting the element’s transform property to translate(-50%, -50%)

Here’s an example:

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;
}

Try it on StackBlitz

Center Any Element Horizontally and Vertically with position, inset, and margin

Section titled “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 to relative
  • The element’s position property to absolute
  • The element’s inset property to 0
  • The element’s margin property to auto

Here’s an example:

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;
}

Try it on StackBlitz