Several methods of CSS horizontal and vertical centering

1. Centering out of the document flow element

Method 1: margin:auto method

CSS code:

div{
      width: 300px;
      height: 300px;
      position: relative;
      border: 1px solid #465468;
 }
 img{
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
 }

HTML code:

<div>
   <img src="prince.png">
</div>

Effect picture:

When an element is absolutely positioned, it is positioned according to the first ancestor element that is not static positioned, so the img here is positioned according to the outer div.

Method 2: Negative margin method

CSS code:

.container{
      width: 500px;
      height: 400px;
      border: 2px solid #379;
      position: relative;
 }
 .inner{
      width: 480px;
      height: 380px;
      background-color: #746;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -190px; /*height的一半*/
      margin-left: -240px; /*width的一半*/
 }

HTML code:

<div class="container">
    <div class="inner"></div>
</div>

Effect picture:

Here, we first use top: 50% and left: 50% to move the coordinate origin (upper left corner) of the inner to the center of the container, and then use a negative margin to offset it to the left by half of its width, and then offset it upwards Half of its own height, so that the center point of the inner is aligned with the center point of the container.

2. Centering that is not separated from the document flow element

Method 1: table-cell method

CSS code:

div{
    width: 260px;
    height: 230px;
    border: 3px solid #555;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
img{
    vertical-align: middle;
}

HTML code:

<div>
    <img src="prince.png">
</div>

Effect picture:

The vertical-align: middle above the div controls the vertical centering, and text-align: center controls the horizontal direction. An interesting fact is that when we remove img's vertical-align: middle, it looks like this:

Still in the middle! Is it really centered?
We can see that the image has moved up a bit and is no longer vertically centered. Why? I don't know either, if you know, let me know, it would be greatly appreciated.
But if we replace the image with text:
CSS code:

div{
    border: 3px solid #555;
    width: 300px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
span{
    vertical-align: middle;
}

HTML code:

<div>
    <span>这是放在span中的文字，通过外层div设置display: table-cell以及vertical-align: middle实现垂直居中。</span>
</div>

Effect picture:

When we remove the vertical-align: middle of the span, it looks like this:

See the difference? The line spacing of the text is smaller. If you run the code on your own computer, you will find that these lines are moved to the middle, and not moved up like the picture. I'm also trying to figure out what's going on, please let me know if you know why.

Method 2: Flexbox Method

CSS code:

.container{
      width: 300px;
      height: 200px;
      border: 3px solid #546461;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
 }
 .inner{
      border: 3px solid #458761;
      padding: 20px;
 }

HTML code:

<div class="container">
    <div class="inner">
        我在容器中水平垂直居中
    </div>
</div>

Effect picture:

align-items controls vertical centering, and justify-content controls horizontal centering. This is a new property of CSS3 and browser support is as follows:

above!