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:

CSS

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

HTML

<section>
  <div></div>
</section>

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

Note

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

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

HTML

<section>
  <span></span>
</section>

Try it on StackBlitz

AD

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

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

HTML

<div>CodeSweetly</div>

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:

CSS

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

HTML

<section>
  <div></div>
</section>

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:

CSS

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

HTML

<section>
  <div></div>
</section>

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:

CSS

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

HTML

<section>
  <div></div>
</section>

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:

CSS

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

HTML

<div>CodeSweetly</div>

Try it on StackBlitz

AD

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:

CSS

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

HTML

<section>
  <div></div>
</section>

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:

CSS

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

HTML

<section>
  <div></div>
</section>

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:

CSS

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

HTML

<section>
  <div></div>
</section>

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:

CSS

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

HTML

<section>
  <span></span>
</section>

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:

CSS

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

HTML

<div>CodeSweetly</div>

Try it on StackBlitz

AD

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:

CSS

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

HTML

<section>
  <div></div>
</section>

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:

CSS

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

HTML

<section>
  <div></div>
</section>

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:

CSS

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

HTML

<section>
  <div></div>
</section>

Try it on StackBlitz

Note

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