Several methods for horizontal and vertical centering in CSS

Go directly to the topic!

1. Centering elements out of the document flow

##Method 1: margin:auto method

CSS code:

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

HTML code:

<p>
   <img  src="/static/imghw/default1.png"  data-src="mm.jpg"  class="lazy"   alt="Several methods for horizontal and vertical centering in CSS" >
</p>

Rendering:

When an element is absolutely positioned, it will be positioned based on the first ancestor element that is not static positioned, so the img here is positioned based on the outer layer p positioning.

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:

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

Rendering:

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

2. Centering elements that are not separated from the document flow

Method 1: table-cell method

CSS code:

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

HTML code:

<p>
    <img  src="/static/imghw/default1.png"  data-src="mm.jpg"  class="lazy"   alt="Several methods for horizontal and vertical centering in CSS" >
</p>

Rendering:

pThe above vertical-align: middle controls the centering in the vertical direction, while text-align: center controls the horizontal direction. An interesting fact is that when we remove the vertical-align: middle of img, it looks like this:

It’s still centered! Is it really centered?

We see that the picture has moved up a little and is no longer centered in the vertical direction. Why? I don't know why, if you know, can you tell me?

But if we change the image into text:

CSS code:

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

HTML code:

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

Rendering:

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

Do you see the difference? Line spacing of text is smaller. If you run the code on your computer, you will find that these lines of text are moved to the middle and have not moved up like the picture. I'm also trying to figure out what's going on. If you know the reason, please tell me.

Method 2: Flexible box 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:

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

Rendering:

align-items controls vertical centering , justify-content controls the horizontal centering. This is a new method of CSS3. The browser support status is as follows:

#The above is the entire content of this article. I hope it will be helpful to everyone’s learning. I also hope everyone will support PHP. Chinese website.

For more related articles on several methods of CSS horizontal and vertical centering, please pay attention to the PHP Chinese website!