Method of centralizing pictures (boxes) horizontally and vertically

rendering

Common code

.box {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin: 20px;
}
<div class="box">
    <img src= ".. /images/bwei.jpeg" alt="">
</div>
Copy the code

1. Elastic box

.box {
    display: flex;
    justify-content: center;
    align-items: center;
}
Copy the code

2, positioning

.box {
    position: relative; } the first/* left: 0; right: 0; bottom: 0; top: 0; margin: auto; * /The second,.box img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Copy the code

3. Use inline block attributes

.box {
    text-align: center;
    line-height: 200px;
    font-size: 0;
}

img {
    vertical-align: middle;
}
Copy the code

If it’s a box, add a display:inline-block to the box;

4. Give two pictures, one for reference

<div class="box">
    <img src= ".. /images/bwei.jpeg" alt="">
    <img src= ".. /images/bwei.jpeg" alt="">
</div>


.box {
    width: 200px;
	height: 200px;
	background-color: pink;
	margin: 20px;
    text-align: center;
    /* Fix image offset by 3 pixels */
    font-size: 0;
}
.box img:nth-child(1) {
    height: 100%;
    width: 0;
}
.box img {
    vertical-align: middle;
}

Copy the code

5. Use table properties

    <div class="box">
        <span>
            <img src= ".. /images/bwei.jpeg" alt="">
        </span>
    </div>

     .box {
         display: table;
     }

     .box span {
         /* table-cell */
         display: table-cell;
         text-align: center;
         vertical-align: middle;
     }
Copy the code

Margin and padding

Margin and padding need to be given different values according to different boxes and images, not recommended, alternate