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
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:
MAIN
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:
.main{ text-align: center; background-color: #fff; border-radius: 20px; width: 300px; height: 350px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
tag, but it is outdated. The usage is as follows:123
This
tag is relative to the text in the
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:
123
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!