Study on horizontal and vertical centered elements in HTML _ HTML/Xhtml _ webpage Creation

This article mainly discusses the horizontal and vertical center of elements in HTML, and explains the operation of the horizontal and vertical center of elements. If you are interested, refer to our design page, the DIV is usually displayed in the center, and displayed in the horizontal and vertical directions relative to the page window. For example, the logon window is displayed in the center.

Many methods have been discussed so far.

HTML:

Copy XML/HTML Code to clipboard

(The following methods are the same ):

First: absolute CSS positioning

It mainly uses absolute positioning, and uses margin to adjust to the intermediate position.

Parent element:

Copy the content to the clipboard using CSS Code.

1. . Maxbox {
2. Position: relative;
3. Width: 500px;
4. Height: 500px;
5. Margin: 5px;
6. Box-shadow: 1px 1px 1px rgba (0, 0, 0, 0.8),-1px-1px 1px rgba (0, 0, 0, 0.8 );
7. }

Child element:

Copy the content to the clipboard using CSS Code.

1. . Minbox {
2. Width: 200px;
3. Height: 200px;
4. Box-shadow: 1px 1px 1px rgba (0, 0, 0, 0.8),-1px-1px 1px rgba (0, 0, 0, 0.8 );
5. }

Horizontal vertical center alignment:

Copy the content to the clipboard using CSS Code.

1. . Align-center {
2. Position: absolute;
3. Left: 50%;
4. Top: 50%;
5. Margin-left:-100px;/* width/-2 */
6. Margin-top:-100px;/* height/-2 */
7. }

Type 2: absolute CSS positioning + Javascript/JQuery

It mainly uses absolute positioning, and uses Javascript/JQuery to adjust to the intermediate position. Compared with the first method, this method improves the flexibility of the class.

Parent element:

Copy the content to the clipboard using CSS Code.

1. . Maxbox {
2. Position: relative;
3. Width: 500px;
4. Height: 500px;
5. Margin: 5px;
6. Box-shadow: 1px 1px 1px rgba (0, 0, 0, 0.8),-1px-1px 1px rgba (0, 0, 0, 0.8 );
7. }

Child element:

Copy the content to the clipboard using CSS Code.

1. . Minbox {
2. Width: 200px;
3. Height: 200px;
4. Box-shadow: 1px 1px 1px rgba (0, 0, 0, 0.8),-1px-1px 1px rgba (0, 0, 0, 0.8 );
5. }

Horizontal vertical center alignment:

Copy the content to the clipboard using CSS Code.

1. . Align-center {
2. Position: absolute;
3. Left: 50%;
4. Top: 50%;
5. }

JQuery:

Copy the content to the clipboard using JavaScript Code

1. $ (Function (){
2. $ (". Align-center" example .css (
3. {
4. "Margin-left": ($ (". align-center"). width ()/-2 ),
5. "Margin-top": ($ (". align-center"). height ()/-2)
6. }
7. );
8. });

Third: CSS3 absolute positioning + displacement

Using absolute positioning can also achieve the same effect as CSS3's transform: translate.

Parent element:

Copy the content to the clipboard using CSS Code.

1. . Maxbox {
2. Position: relative;
3. Width: 500px;
4. Height: 500px;
5. Margin: 5px;
6. Box-shadow: 1px 1px 1px rgba (0, 0, 0, 0.8),-1px-1px 1px rgba (0, 0, 0, 0.8 );
7. }

Child element:

Copy the content to the clipboard using CSS Code.

1. . Minbox {
2. Width: 200px;
3. Height: 200px;
4. Box-shadow: 1px 1px 1px rgba (0, 0, 0, 0.8),-1px-1px 1px rgba (0, 0, 0, 0.8 );
5. }

Horizontal vertical center alignment:

Copy the content to the clipboard using CSS Code.

1. . Align-center {
2. Position: absolute;
3. Top: 50%;
4. Left: 50%;
5. -Webkit-transform: translate (-50%,-50% );
6. -Moz-transform: translate (-50%,-50% );
7. Transform: translate (-50%,-50%);/* shift left to the top */
8. }

Fourth: Flexbox: [scaling layout box model]

It is too easy for the Flexbox model to make the elements vertical horizontally.

Here we need to change the HTML:

Copy XML/HTML Code to clipboard

Parent element:

Copy the content to the clipboard using CSS Code.

1. . Maxbox {
2. Position: relative;
3. Width: 500px;
4. Height: 500px;
5. Margin: 5px;
6. Box-shadow: 1px 1px 1px rgba (0, 0, 0, 0.8),-1px-1px 1px rgba (0, 0, 0, 0.8 );
7. }

Child element:

C # copy the content to the clipboard

1. . Minbox {
2. Width: 200px;
3. Height: 200px;
4. Box-shadow: 1px 1px 1px rgba (0, 0, 0, 0.8),-1px-1px 1px rgba (0, 0, 0, 0.8 );
5. }

Horizontal vertical center alignment:

Copy the content to the clipboard using CSS Code.

1. . Align-center {
2. Display: flex;
3. Display:-webkit-flex;/* compatibility issues */
4. Justify-content: center;
5. Align-items: center;
6. }

Comparison of several methods:

The first type of CSS definitely positions the margin adjustment, which has good compatibility but lacks flexibility. If many boxes need to be horizontally and vertically centered, different. align-center needs to be written because of their width and height.
The second method uses the scripting language, which has good compatibility and makes up for the shortcomings of the first one. The effect of horizontal vertical center is not affected due to the change of width and height.
The third method uses some new attributes of CSS3, which are compatible with IE10, Chrome, Firefox, and Opera. The compatibility is not very good. The effect of horizontal and vertical center is not affected due to the change of width and height.
The Flexbox model is compatible with Firefox, Opera, and Chrome, and IE has never been used. It also does not affect the effect of horizontal vertical center because of the change of width and height.

The above is all the content of this article, hoping to help you learn.