You must not know how the pictures in the div are centered horizontally and vertically

You must not know how the pictures in the div are centered horizontally and vertically. Here, the editor provides five centering methods. Let’s take a look.

body structure

Method 1:
Set display to table-cell, then set text-align to center for horizontal centering, and set vertical-align to middle for vertical centering.

The result is shown in the figure below:
It is realized by position positioning. Set p to relative positioning, and set img to absolute positioning, left: 50%, top: 50%. At this time, the upper left corner of the picture is at the center of p. If the center of the picture is at the center of p, You need to move the image up by half the image height and to the left by half the image width.

The result is shown in the figure below:
It is still achieved through position positioning. Set p to relative positioning, and set img to absolute positioning, left: 50%, top: 50%. At this time, the upper left corner of the picture is at the center of p. If the center of the picture is at the center of p, you need to place the picture Move half the height of the picture up and half the width of the picture to the left. If you don’t know the width and height of the element, you can use transform: translate(-50%,-50%);

Method 4:

Method 5: Elastic Layout flex

The effect is the same, I hope it can help everyone!

This article is transferred from: https://blog.csdn.net/DreamFJ/article/details/68921957

Recommended tutorial: “HTML Tutorial”

The above is what you must not know For details on how the pictures in the div are centered horizontally and vertically, please pay attention to other related articles on 1024programmer.com for more information!