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:245207browse
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: 
- 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!