The Complete Guide to CSS Centering

Today, let's take a look at how to center an element in CSS.

I. Horizontal Center

1. Inline Elements

<div class="container">
  <span class="content">Center horizontally</span>
</div>

text-align is generally used in block-level elements to align the text in them. In fact, text-align applied to a block-level element aligns it's containing inline element horizontally.

.container {
  text-align: center;
}

2. Block-level Elements

<div class="container">
  <div class="content">Center horizontally</div>
</div>

If the height and width of a block element are known, it is possible to center the element horizontally by setting the element's left and right margin values ​​to auto.

.content {
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
}

If there are multiple block elements, you need to wrap the multiple elements in one element to achieve horizontal centering using this method.

<div class="container">
  <div class="box">
    <div class="content">Center horizontally</div>
    <div class="content">Center horizontally</div>
  </div>
</div>
.box {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

3. Universal

In Flex layouts, justify-content can be used to set the alignment of flexbox elements in the main axis direction. When its attribute value is center, the entire sub-element will be in the center of the main axis.

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

If the main axis of the flexbox is vertical, you can use align-items instead of justify-content to center the elements horizontally.

.container {
 display: flex;
 flex-direction: column
 align-items: center;
}

In a Grid layout, the justify-content property aligns the grid within the grid container along the row axis (horizontal). When the property value is center, the grid can be aligned to the horizontal center of the grid container.

.container {
  display: grid;
  justify-content: center;
}

Horizontal centering of elements can be achieved by using absolute positioning and transforms.

.container {
  position: relative;
}

.content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Negative margins can also be used instead of transform if the width of the block element is known.

.container {
  position: relative;
}

.content {
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
}

II. Vertical Centering

1. Block-level Elements

<div class="container">
  <div class="content">Center vertically</div>
</div>

Vertical centering of elements can be achieved by using absolute positioning and transforms.

.container {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Negative margins can also be used instead of transform if the height of the block element is known.

argin-top: -50px;}

2. Universal

In Flex layout, the align-items property is used to define the alignment of flex children in the lateral (vertical) direction of the current row of the flex container. When its property value is center, the element is centered in the container.

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

If you switch the main axis of Flex to vertical, you need to use justify-content instead of align-items to achieve vertical centering of elements.

.flex {
 display: flex;
 flex-direction: column;
 justify-content: center;
}

With CSS Grid layouts, you can use the align-content property to vertically center items to their grid area.

.container {
  display: grid;
  align-content: center;
}

If you change the orientation of the grid to horizontal, vertical centering still works.

.container {
  display: flex;
  align-content: center;
 grid-auto-flow: column;
}

III. Horizontal and Vertical Centering

<div class="container">
  <div class="content">Center horizontally and vertically</div>
</div>

1. Absolute Positioning

The most common way to vertically center an element is to use absolute positioning and transform.

.container {
  position: relative;
}

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

You can also use margin instead of transform if the height and width of the element are known.

.container {
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

2. Flex Layout

When using Flex layout, you can combine the above horizontal and vertical centering to achieve horizontal and vertical centering.

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

3. Grid Layout

In a Grid layout, you can use the following forms to achieve horizontal and vertical centering of elements.

.container {
  display: grid;
  place-items: center;
}

The place-content property is shorthand for align-content and justify-content. When the value of this property is center, all child elements are stacked and aligned in the middle of the parent element.