When we design a page, we often need to center the DIV, and center it horizontally and vertically relative to the page window, such as centering the login window. So far, many methods have been explored. HTML: XML/HTML CodeCopy content to clipboard
Effect diagram (the following methods have the same effect diagram): The first one: CSS absolute positioning Mainly use absolute positioning, and then use margin to adjust to the middle position. Parent element: CSS CodeCopy content to clipboard
Child Elements: CSS CodeCopy content to clipboard
Horizontal and vertical center alignment: CSS CodeCopy content to clipboard
The second method: CSS absolute positioning + Javascript/JQuery Mainly use absolute positioning, and then use Javascript/JQuery to adjust it to the middle position. Compared with the first method, this method improves the flexibility of the class. Parent element: CSS CodeCopy content to clipboard
Child Elements: CSS CodeCopy content to clipboard
Horizontal and vertical center alignment: CSS CodeCopy content to clipboard
JQuery: JavaScript CodeCopy content to clipboard
The third type: CSS3 absolute positioning + displacement The same effect can be achieved by using absolute positioning and CSS3's transform: translate. Parent element: CSS CodeCopy content to clipboard
Child Elements: CSS CodeCopy content to clipboard
Horizontal and vertical center alignment: CSS CodeCopy content to clipboard
Fourth: Flexbox: [Flexible Layout Box Model] It's too easy to make elements horizontal and vertical with the Flexbox model. Here we need to change the HTML: XML/HTML CodeCopy content to clipboard
Parent element: CSS CodeCopy content to clipboard
Child Elements: C# Code to copy content to the clipboard
Horizontal and vertical center alignment: CSS CodeCopy content to clipboard
Comparison of several methods: The first type of CSS absolute positioning margin adjustment has good compatibility but lacks flexibility. If there are many boxes that need to be centered horizontally and vertically, different .align-center should be written because of their different widths and heights. The above is the full content of this article. I hope it will be helpful for everyone’s study. |
<<: CSS delivery address parallelogram line style example code
>>: MySQL query statement grouped by time
<meta name="viewport" content="...
View historical commands and execute specified co...
Frame structure tag <frameset></frameset...
Install mysql5.7.18 on CentOS6.7 1. Unzip to the ...
# contains a location information. The default anc...
After adding –subnet to Docker network Create, us...
Gird layout has some similarities with Flex layou...
This article uses examples to illustrate the usag...
0x00 Introduction A few months ago, I found a vul...
Nginx can generally be used for seven-layer load ...
Table of contents definition The role of the curs...
Copy code The code is as follows: <hr style=&q...
1. Performance schema: Introduction In MySQL 5.7,...
MySQL download and installation (version 8.0.20) ...
This article shares the specific code of Vue usin...