Skip to main content

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.

note
  • 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:

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

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:

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

Center Text Horizontally

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

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

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

Center Block Elements Vertically

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

note

The padding technique works if you do not define a height property for the element's container (parent element).

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

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:

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

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

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

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
tip

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

Center Text Horizontally and Vertically

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

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

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

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

info

The inset property is a shorthand for the top, right, bottom, and left declarations.

Overview

This article discussed how to center HTML elements. We also used examples to see how it works.

Everything you need to sell courses, webinars, downloads, and community.