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

CodeSweetly ads

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

CodeSweetly ads

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

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

CodeSweetly ads

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.

CodeSweetly ads

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

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

CodeSweetly ads

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.