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

	<p>
		<img  alt="You must not know how the pictures in the div are centered horizontally and vertically" >
	</p>

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

<style>
	*{margin: 0;padding: 0;}
    p{
		width:150px;
		height: 100px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		border:1px solid #000;
	}
	img {
        width: 50px;
  		height: 50px;
	}
</style>

The result is shown in the figure below:

Method 2:
Achieved through position positioning. Set p to relative positioning, and set img to absolute positioning absolute, left:50%, top:50%. At this time, the upper left corner of the picture is located in the center of p. If the center of the picture is located in the center of p, then You need to move the image up by half the image height and to the left by half the image width.

<style>
	*{margin: 0;padding:0;}
	p{
		width:150px;
		height: 100px;
		position: relative;
		border:1px solid #000;
	}
	img {
  		width: 50px;
  		height: 50px;
  		position: absolute;
  		top: 50%;
		left: 50%;
  		margin-top: -25px; /* 高度的一半 */
  		margin-left: -25px; /* 宽度的一半 */
	}
</style>

The result is as shown below:

Method 3: Can be used when the true width and height of the image or element is unclear
It is still achieved through position positioning. Set p to relative positioning and set img to absolute positioning absolute, left:50%, top:50%. At this time, the upper left corner of the picture is located in the center of p. If the center of the picture is located in the center of p, you need to move the picture Move half of the image height upward and half of the image width to the left. If you don’t know the width and height of the element, you can use transform: translate(-50%,-50%);

<style>
    *{margin: 0;padding:0;}
    p{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>

Method 4:

<style>
    *{margin: 0;padding:0;}
    p{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>

Method five: Flexible layout flex

<style>
    *{margin: 0;padding:0;}
    p{
        width:150px;
        height: 100px;
        border:1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    img {
        width: 50px;
        height: 50px;
    }
</style>

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

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

Recommended tutorial: "HTML Tutorial"

The above is the detailed content of You must not know how the pictures in the div are centered horizontally and vertically. For more information, please follow other related articles on the PHP Chinese website!