Center HTML Element with CSS

In the following cases which we will explore below, we assume that the width of the child is less than the width of the parent. However, the cases are based on whether the height of the parent element and the child element is fixed or not.

The parent HTML element has a fixed height

The child HTML element has a fixed height

Below respectively the HTML and CSS code illustrating this case, followed by the graphic rendering.

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  height: 200px;                /* Parent element fixed height */
  border: 2px solid #999;
  background-color: #eee;
}

.child {
  width: 20%;
  height: 25%;                  /* Child element fixed height and less that the parent's height */
  background-color: red;
}

Below is the graphical result we want to achieve.

To center the child element in this condition, we will use 3 different techniques (Positioning, Flex, Grid):

Positioning

This technique uses CSS properties position and transform. Solution CSS below:

.parent {
  ...
  position: relative;                     /* 1. */
}

.child {
  ...
  position: absolute;                     /* 2. */
  top: 50%;                               /* 3. */
  left: 50%;                              /* 4. */
  transform: translate(-50%, -50%);       /* 5. */
}

1. Make the parent element relatively positioned. This is important because it allows the child element with an absolute position to position itself relative to the parent element.
2. Make the child element itself absolutely positioned.
3. Place the top edge of the child element vertically in the middle of the parent element.
4. Place the left edge of the child element horizontally in the middle of the parent element.
5. Correct the position by moving the child element up and to the left half of its own height and width respectively.

This technique can also be used to center only horizontally or only vertically.

Vertical:
Only 4. and 5. will be change as below.

.parent {
  ...
  position: relative;                     /* 1. no change */
}

.child {
  ...
  position: absolute;                     /* 2. no change */
  top: 50%;                               /* 3. no change */
  left: 0;                                /* 4. omit left property or set to 0 */
  transform: translate(0, -50%);          /* 5. also equivalent to 'transform: translateY(-50%)' */
}

Horizontal:
Only 3. and 5. will be change as below.

.parent {
  ...
  position: relative;                     /* 1. no change */
}

.child {
  ...
  position: absolute;                     /* 2. no change */
  top: 0;                                 /* 3. omit top property or set to 0 */
  left: 50%;                              /* 4. no change */
  transform: translate(-50%, 0);          /* 5. also equivalent to 'transform: translateX(-50%)' */
}

Flex

This technique uses CSS layout Flexbox. Solution CSS below:

.parent {
  ...
  display: flex;                          /* 1. */
  justify-content: center;                /* 2. */
  align-items: center;                    /* 3. */
}

1. Make the parent element behaves like a block element and lays out the child element according to the flexbox model
2. Pack child element around the center horizontally. Omit this CSS property in case you want to center only vertically.
3. Pack child element around the center vertically. Omit this CSS property in case you want to center vertically.

Grid

These techniques use CSS layout grids and there are:

First

.parent {
  ...
  display: grid;                          /* 1. */
  justify-content: center;                /* 2. */
  align-items: center;                    /* 3. */
}

It looks exactly like the above technique of Flex (2. and 3. identical) except that the display value of the CSS property is grid instead of flex (1. different).

Second

This one is a little weird but it works. I found it on CSS-TRICKS.

.parent {
  ...
  display: grid;                          /* 1. */
}

.child {
  ...
  margin: auto;                           /* 2. */
}

1. Make the parent elements behave like a block element and lays out the child element to grid model
2. Tell the browser to select a suitable margin to use.

The child HTML element does not have a fixed height

You can use any of the above techniques as long as the height of the child element does not exceed the height of the parent element. If the height of the child element exceeds the height of the parent element, you end up in a situation as in the following graphic.

To avoid this scenario, create the parent element without a fixed height and follow the next session "Parent HTML Element Has No Fixed Height" for details on how to center the child element in this case.

Parent HTML element does not have a fixed height

When the parent element does not have a fixed height, the height of the child element does not matter, instead we will pay attention to the CSS display property of the element. Whether it's block or inline.

Inner element is block

Below respectively the HTML and CSS code illustrating this case, followed by the graphic rendering.

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  border: 2px solid #999;
  background-color: #eee;
}

.child {
  display: block;                        /* Div by default is a block element, this is only to */
                                         /* emphasize that the child must be a block element. */
  width: 20%;
  height: 50px;
  background-color: red;
}

.parent {
  ...
  padding-top: 4rem;                     /* 1. */
  padding-bottom: 4rem;                  /* 2. */
}

.child {
  margin: auto;                          /* 3. */
}

1. Set the height of the padding area on the top of an element. The value must be the same as the value of 2.
2. Set the height of the padding area on the bottom of an element. The value must be the same as the value of 1.
3. set the margin property to auto to horizontally center the child element in the parent element. The child element will then occupy the specified width and the remaining space will be divided equally between the left and right margins.

Ignore 1. and 2. for horizontal centering only and ignore 3. for vertical centering only.

Obviously, the child element will be centered horizontally and vertically, as shown in the following graphic.

Inner element is inline / inline-block

Below respectively the HTML and CSS code illustrating this case, followed by the graphic rendering.

<div class="parent">
  <button class="child">BUTTON</button>
</div>

.parent {
  border: 2px solid #999;
  background-color: #eee;
}

.child {
  background-color: red;
}

.parent {
  ...
  padding-top: 4rem;                    /* 1. */
  padding-bottom: 4rem;                 /* 2. */
  text-align: center;                   /* 3. */
}

1. Set the height of the padding area on the top of an element. The value must be the same as the value of 2.
2. Set the height of the padding area on the bottom of an element. The value must be the same as the value of 1.
3. Set the horizontal alignment of the child element in the middle.

Ignore 1. and 2. for horizontal centering only and ignore 3. for vertical centering only.

Obviously, the child element will be centered horizontally and vertically, as shown in the following graphic.

Conclusion

The list of cases covered in this article is not an exhaustive list, but they are the ones you will see frequently.