How to Center HTML Elements with CSS

John on July 09, 2020

Centring elements is essential knowledge when it comes to styling HTML with CSS. Depending on the scenario, we can use CSS3 to approach aligning HTML content in several different ways. 

In this guide, we will go through the range of ways we can center in CSS and how we might name classes to ensure we are not repeating CSS rules and bloating the code.

Text Align Center CSS Rule

The text-align CSS rule is the easiest way to center an element. Let's create a .text-center CSS class that can be reused every time we want to apply this style.

.text-center {
  text-align: center;
}

Then we can apply this class to a block-level text element to align its contents in the center.

<h2 class="text-center">Centered Heading Text</h2>

If we want to center align a div the .text-center class must be placed on the parent and the child must have a width of less than 100% to see any effect. Let's assume col-6 has a width of 50% in the example below.

<div class="text-center">
  <div class="col-6"></div>
</div>

Note - the centrally aligned child must be a block-level element such as a div. Inline elements such as span must be block styled using display: block or display: inline-block.

span {
  display: block;
}

Flex Align Center

The flex CSS property brings a whole new realm of styling possibilities. If you are not using flex in your workflow you should because you can make intricate layouts and various other styles such as centring with fewer lines of code. On top of that, it is becoming the new standard for modern front-end layouts.

body {
  height: 100vh;
}

.flex-center {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
}

<div class="flex-center">
  <div class="box"></div>
</div>

Run this code on CodePen.

Let's take a look at what the flex specific CSS rules above are doing.

• display: flex - enabled flex context for all its direct children
• justify-content: center   - horizontal align child elements in the center
• align-items: center - vertical align child elements in the center

The flex method is my preferred way to align an element both vertically and horizontally. It is simple to use, provides full styling control and importantly does not take elements out of the document flow.

What's also nice about the flex centring method is one could keep adding the div class="box" elements to the above example, even add margin-right to space them out and they will always remain perfectly in the center of the parent. 

Margin 0 Auto

An old trick that still remains useful for things like wrappers since it doesn't need to be applied to a parent element. Let's imagine we want to create a wrapper to centrally contain the content of a website. We could do it like this:

body {
  height: 100vh;
}

.wrapper {
  height: 100%;
  margin: 0 auto;
  max-width: 1500px;
  background: red;
}

<div class="wrapper"></div>

The idea here with margin: 0 auto; is to automatically adjust the left and right margins, thus pushing the element into the center of the body.

Position Absolute Center

You can set the position of an element to absolute allowing it to be placed anywhere relative to a parent element with position: relative; applied to it.

body {
  height: 100vh;
  position: relative;
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  background: red;
  height: 200px;
  width: 200px;
}

<div class="modal"></div>

The main issue with absolute positioning is it takes the element out of the flow of the document. This means that an absolutely positioned element will have no impact on the height and width of the parent or any element in the document.

These “limitations” can actually be the exact behaviour you are seeking for things like modal dialogues, where the element is placed in the center above everything else on the screen.

Conclusion

You now know a number of ways to style HTML elements in the center using CSS. These methods should have you covered for most scenarios, though I suggesting using flex most of the time as it is the new modern standard.