Five ways to center text within a div using CSS

Español | English

Here is a list of five techniques for centering text within a div using CSS.

1. flexbox method

Flexbox enables us to efficiently define the alignment and positioning of our elements. To do so, we'll employ the horizontal alignment (justify-content) and vertical alignment (align-items) features of flexbox when assuming the default value of flex-direction: row.

<div class="flexbox">
  flexbox
</div>

.flexbox {
  align-items: center;
  display: flex;
  height: 100px;
  justify-content: center;
  width: 200px;

  background: #ffff99;
  color: #333;
}

flexbox

We can simplify this example even further by using just display: grid; and place-items: center; instead of display: flex;, align-items: center;, and justify-content: center;.

2. margin auto method

This technique relies on utilizing the margin property of the element you wish to center, creating the desired centering effect by adjusting its distance from the edges of the container. When combined with the features of flexbox, it also allows achieving vertical text alignment.

<div class="margin-auto">
  <span class="margin-auto__content">
    margin auto
  </span>
</div>

.margin-auto {
  display: flex;
  height: 100px;
  width: 200px;

  background: #ffff99;
  color: #333;
}

.margin-auto__content {
  margin: auto;
}

margin auto

3. text align center method

This is the simplest classic technique, centered text alignment is achieved by using the text-align property of the parent element.

It's also possible to vertically center the text by using the vertical-align property in combination with the line-height property (which should be set to the same height as the text container and is typically used in containers with a fixed height).

<div class="text-align-center">
  text align center
</div>

.text-align-center {
  height: 100px;
  width: 200px;

  background: #ffff99;
  color: #333;

  line-height: 100px;
  text-align: center;
  vertical-align: middle;
}

text align center

4. position absolute method

This technique allows you to place the text anywhere within its container. In our case, as we wish to center it, we first position the top-left corner of our text in the center of the container using the top and left properties set to 50%. Finally, we adjust its position with the transform property, shifting it 50% to the left and upwards to center it within its container.

By setting the position to absolute, we remove the element from the page flow. It's important to note that if not used correctly, this technique can lead to unintended element overlap.

<div class="position-absolute">
  <span class="position-absolute__content">
    position absolute
  </span>
</div>

.position-absolute {
  position: relative;

  height: 100px;
  width: 200px;

  background: #ffff99;
  color: #333;
}

.position-absolute__content {
  left: 50%;
  position: absolute;
  top: 50%;

  transform: translate(-50%, -50%);
}

position absolute

5. table cell method

When our container element doesn't have fixed height or width but adapts to 100% of its parent element (commonly used, for example, when the html or body elements are set to 100%), we can use the display: table-cell; property to expand our text's size to match that of its container. We also need to add the display: table; property to the container. Once our element is extended, we can center the text as in method 3.

<div class="table-cell">
  <div class="table-cell__container">
    <span class="table-cell__content">
      table cell
    </span>
  </div>
</div>

.table-cell {
  height: 100px;
  width: 200px;
}

.table-cell__container {
  display: table;
  height: 100%;
  width: 100%;
}

.table-cell__content {
  display: table-cell;

  text-align: center;
  vertical-align: middle;

  background: #ffff99;
  color: #333;
}

table cell

---