Home > Web Front-end > HTML Tutorial > 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

烟雨青岚
Release: 2020-07-01 11:35:22
forward
2715 people have browsed it

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>
Copy after login

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>
Copy after login

The result is shown in the figure below:
You must not know how the pictures in the div are centered horizontally and vertically

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>
Copy after login

The result is as shown below:
You must not know how the pictures in the div are centered horizontally and vertically

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>
Copy after login

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>
Copy after login

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>
Copy after login

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!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template