CSS Centering Elements

CSS Centering Elements

CSS provides several ways to center content, and the best technique depends on what is being centered and whether it needs horizontal, vertical, or two-dimensional alignment.

Text can be centered with text-align, block elements can often be centered with automatic margins, and modern layout methods such as Flexbox and Grid can center elements along one or both axes. Positioning can also be useful when an element needs to be centered independently of normal flow.

Centering Text

The text-align property can center inline content within a block container.

.heading {
  text-align: center;
}

This centers the text inside the element. It does not center the block element itself.

<h2 class="heading">Centered Heading</h2>

The same technique can center other inline content inside a container, including links and inline images.

Centering Block Elements

A block element with a width or maximum width smaller than its containing block can often be centered horizontally using automatic inline margins.

.box {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

The browser distributes the available horizontal margin space between the two sides of the element.

The margin shorthand is commonly used for the same result.

.box {
  width: 300px;
  margin: 0 auto;
}

A responsive variation can use max-width instead of a fixed width.

.box {
  max-width: 600px;
  margin: 0 auto;
}

Centering Inline Content

Because text-align affects inline-level content inside a block container, it can also center elements such as links and inline or inline-block elements.

.container {
  text-align: center;
}
.button {
  display: inline-block;
}

The .button is centered because it participates in the inline formatting context of the centered container.

This differs from using margin: 0 auto, which is commonly used to center a block box with an appropriate width.

Centering with Flexbox

Flexbox provides a convenient way to center items along the main and cross axes.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

With the default flex-direction: row, justify-content: center centers items horizontally along the main axis and align-items: center centers them vertically along the cross axis.

The container needs available space on an axis for centering along that axis to be visually apparent.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

Flexbox is covered in detail in the next Layout subsection.

Centering with Grid

Grid can center an item along both axes with the place-items shorthand.

.container {
  display: grid;
  place-items: center;
  min-height: 200px;
}

For this simple example, place-items: center centers the grid item within its grid area in both the block and inline directions.

Grid is covered in detail in its own Layout subsection after Flexbox.

Centering with Position

An absolutely positioned element can be centered within a positioned containing block using offsets and a transform.

.container {
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

The top and left declarations place the element's top-left corner at the center of its containing block. The transform then moves the element back by half of its own width and height.

This technique removes the centered element from normal flow, so Flexbox or Grid is usually more convenient when the centered content should remain part of the normal layout.

Choosing a Centering Method

There is no single centering technique that is best for every layout. Choose a method based on the type of content and the layout behavior you need.

Use the simplest technique that matches the layout. There is usually no reason to introduce positioning or a complete layout system when a basic text-align or automatic margin rule already provides the required result.

CSS Centering Example

The following example compares three common centering techniques. Open the example in the editor and change or remove the centering declarations to see how each method controls the layout.

.text-example {
  text-align: center;
}
.margin-box {
  width: 200px;
  margin: 0 auto;
}
.flex-example {
  display: flex;
  justify-content: center;
  align-items: center;
}