Home >Web Front-end >HTML Tutorial >How to center a div horizontally and vertically on the screen

How to center a div horizontally and vertically on the screen

醉折花枝作酒筹forward: 2021-04-25 18:25:245086browse

This article will introduce to you how to center a div horizontally and vertically on the screen. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Recently when writing web pages, it is often necessary to display p in the center of the screen, so I recorded several common methods, which are relatively simple.
Simply add the <center></center> tag to the horizontal center, or set margin:auto;Of course, you can also use the following method

The following two Method to plant in the middle of the screen (horizontally centered and vertically centered)
Put the demonstration html code:

<body>
	<p class="main">
		<h1>MAIN</h1>
	</p>
</body>

Method 1:

pUse absolute layout, set margin:auto;And set the values of top, left, right, and bottom to be equal , not necessarily all 0.

.main{
	text-align: center; /*让p内部文字居中*/
	background-color: #fff;
	border-radius: 20px;
	width: 300px;
	height: 350px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

The effect is as shown:
How to center a div horizontally and vertically on the screen

Method 2:
It is still an absolute layout, let left and top both be 50%, which is in the horizontal direction Let the leftmost part of p be 50% away from the leftmost part of the screen, which is the same in the vertical direction, so use transform to translate 50% of its own width (height) to the left (upward), thus achieving the centering effect. The rendering is as follows Same as above.

 .main{
	text-align: center;
	background-color: #fff;
	border-radius: 20px;
	width: 300px;
	height: 350px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

Method 3:
For horizontal centering, you can use the simplest <center></center> tag, but it is outdated. The usage is as follows:

<p><center>123</center></p>

This <center></center> tag is relative to the text in the <p></p> tag, which can be centered.

Since the center tag is outdated, it is not recommended to use it in a formal way. You can use the following method instead:

<p style="text-align:center;">123</p>

Recommended learning: html video tutorial

The above is the detailed content of How to center a div horizontally and vertically on the screen. For more information, please follow other related articles on the PHP Chinese website!

html auto margin transform

Statement：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：How to quickly find links in htmlNext article：How to quickly find links in html

See more

How to center a div horizontally and vertically on the screen

Related articles