How to center images horizontally and vertically in DIV or DIV

<div class="box">
  <img />
</div>

Common ways to center horizontally:

text-align:center ——This can achieve the horizontal centering of sub-element fonts and images.

margin:0 auto - This is a horizontal centering method for block elements

Common ways to vertically center:

vertical-align: middle;——This vertical centering property is only valid for inline or inline-block elements.

The use of flex's vertical centering is not considered here

How to center an image horizontally and vertically in a div:

The first method: direct manual calculation. Knowing the height of the box and the height of the image

.box{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
}
img{
    width: 80px;
    height: 80px;
    padding-top: 110px;
}

Note: This method is: subtract the height of the image from the height of the box and divide it by 2, which is the value of padding-top. Of course, you can also use margin-top, which can also achieve vertical centering of the image in the div. To center the text horizontally, just use text-align: center;

The second method: the image width and height are known

 img{
     position:relative;
     top:50%;
     left:50%;
     Margin-top: half of the negative image height;
     Margin-left: half of the negative image width;
   }

The third method: The width and height of the image are unknown, and the height of the box is preferably fixed.

img{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Note: If it is not fixed and the height is adaptive, the image will probably move a little above the div. This is a way to use CSS3 to achieve horizontal and vertical centering. Of course, if it is compatible, this method is not supported if transform is not supported.

The fourth method: Treat the box as a cell. You don’t need to set the width and height of the box, and let the image expand by itself. In this way, the width and height of the box are preferably fixed. Of course, the effect can be achieved even if it is not fixed.

.box{
    width: 300px;
    height: 300px;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
    border: 1px solid red;
}

Note: display: table-cell is equivalent to treating the label element as a cell. The only drawback is that it is not compatible with IE6/7.

The fifth method: Use table to achieve the effect of horizontal and vertical centering. The width and height of the table are known

html:

 <table class="img_meng_show">
   <tr>
     <td>
        <img src="">
     </td>
   </tr>
 </table>

css:

 .img_meng_show td{
   vertical-align: middle;
    text-align: center;
 }

How to center a DIV horizontally and vertically:

First way:

HTML:

<div class="box></div>

css:

  .box{
    position:absolute (or fixed);
    top:0;
    left:0;
    bottom:0;
    right:0;
   margin:auto;
    width:100px;
    height:200px;
 }

This can achieve vertical and horizontal centering of the div, but the necessary condition is that the width and height must be added, and the margin must also be added. If you want to center the image horizontally and vertically, you can use margin-left as shown above.

If you just want to center it vertically, just use top and bottom, and margin:auto 0;

Similarly, if you just want to center it horizontally, just use top and bottom, and then margin: 0 auto;

But this method does not support IE8 and below.

Second way:

Using the CSS3 translate method, you can also center the div vertically and horizontally:

.box{
    position: fixed (or absolute);
    top: 50%;
    left: 50%;
    width: 100px;
    /*height: 100px;*/The height can be fixed background: skyblue;
    transform: translate(-50%,-50%);
}

If it is a div within a div, that is

<div class="out">
    <div class="in"></div>
</div>

This structure can also be achieved by referring to the way of horizontally and vertically centering the image in the div. If you just want to horizontally center the block element, text-align: center; should be replaced with margin: 0 auto;

Summarize

The above is the method of horizontally and vertically centering DIV or images in DIV that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!