Several methods to achieve centering

In the process of development, many times we need to achieve centering, so record several centering methods.

Centered horizontally

text-align: center;

text-align: centerCentering is only for inline elements , such as span, a, img, input, text and other inline elements.

We have this HTML structure:

<div class="parent">
  <span>inline element</span>
</div>

Inline centering text-align: centercan .

.parent {
  text-align: center;
  width: 200px;
  height: 50px;
  border: 1px solid red;
}

Note: It does not work for block-level elements within an element. But you can displayset to inline-block 或者 inline, and it can also take effect, but it should be noted that inlineafter some functions will be lost, such as setting the width and height of the element.

margin: 0 auto;

Centering of block-level elementsmargin: 0 auto can be achieved by setting to itself . E.g:

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

.parent {
  width: 100%;
  border: 1px solid red;
}
.chilren {
  margin: 0 auto;
  width: 20px;
  height: 20px;
  background: red;
}

text-align: centerLike , it can also change the inline element's displayto inline-blockto achieve centering of inline elements.

positon: absolute;

absoluteCentering is also possible using . But after using it, the child element can't hold the parent element up. You need to determine the size of the parent element yourself.

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

.parent {
  position: relative;
  width: 200px;
  height: 50px;
  border: 1px solid red;
}
.chilren {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background: red;
}

First add to the parent element position: relativeso that the child element can be absolutely positioned through the parent element. Then offset the element to the right by 50%. It should be noted that the left line of the child element is centered at this time . So at this time, you need to use transilateX(-50%)to move the element to the right by 50% relative to itself, so that the center can be perfectly achieved. (This method also works when vertically centered)

display: flex;

Horizontal centering (and vertical centering) can also be easily achieved using flex layouts.

Take a look at the example below:

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

.parent {
  display: flex;
  justify-content: center;
  width: 200px;
  height: 50px;
  border: 1px solid red;
}

.chilren {
  left: 50%;
  width: 50px;
  height: 50px;
  background: red;
}

It is really convenient to use flex to achieve centering, and it is also a great tool for web page layout~ It is very easy to use. For those who don't understand flex, you can refer to this article by Mr. Ruan Yifeng: Flex Layout Tutorial: Grammar .

Center vertically

positon: absolute; 和 display: flex;

These two methods are also very convenient to achieve vertical centering.

positon: absolute;

The method to achieve vertical centering by determining positioning is basically the same as achieving horizontal centering. It only needs to be shifted downward by 50%, and then shifted upward by 50% relative to itself. Look at the code:

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

.parent {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
.chilren {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 50px;
  height: 50px;
  background: red;
}

translate3dThis property is used here , and the three values ​​correspond to the displacement in the x, y, and z axis directions respectively. In this way, we can perfectly achieve the centering of the elements~

margin-top: 50%;

According to absolute positioning to achieve centering, you can also think of using margin-top: 50%and transform: translateY(-50%)to achieve vertical centering, the reason is similar. The code will not be put, I believe that will use absolute positioning to achieve centering.

display: flex;

This is very simple, just look at the code. After reading Mr. Ruan Yifeng's article, you can understand it. It is written in great detail, so I won't go into details.

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

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  border: 1px solid red;
}

.chilren {
  left: 50%;
  width: 50px;
  height: 50px;
  background: red;
}

line-height achieves vertical centering of text

Because of the vertical centering of the line height, elements within the line are centered. Then using line-heightequal to height of the parent element can also achieve the centering of the element.

<div class="parent">
  <div class="chilren">啦啦啦，line-height</div>
</div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
.chilren {
  line-height: 200px;
}

This method is very convenient when implementing vertical centering of text.

For the time being, I will record so many commonly used centering methods, and if there are other easy-to-use methods, they will be supplemented.