Horizontal and vertical center of CSS, vertical center of css

Horizontal and vertical center of CSS, vertical center of css

In the world of css, if we want to center a block-level element horizontally, we must all know that we use margin: 0 auto, in this way, the block-level element can be horizontally centered in its parent element.

The column is as follows:

<! DOCTYPE html> Run the following command. The Green Square is horizontally centered on its parent element.

Then the problem arises. Do we want the green square to be vertically centered or horizontally vertical centered?

Is it possible to set margin: auto 0; or margin: auto?

I thought so too, because setting margin: 0 auto; can be horizontally centered.

But vertical center is not the case.

In the normal Document Stream, if you set margin: auto, the browser will understand it as margin: 0 auto;

(Set margin-top and margin-bottom to 0, while margin-left and margin-right to adaptive to left and right ).

From W3.org

If you have any concerns, you can replace margin: 0 auto; in the demo with margin: auto;. The running result is the same.

If we want to vertically center block-level elements, what should we do?

 Method 1:

Set the element to absolute positioning absolute, so that the element can be separated from the normal document stream, and absolute has a feature: the display of the element is set to block.

Then, set the absolute positioning coordinate (left, top, right, bottom) to 0, so that the browser will enclose a new box model for absolute positioning.

Combined with margin, You can center horizontally (margin: 0 auto;), vertically (margin: auto 0;), and vertically (margin: auto 0: auto;) is also perfect.

The demo listed below is 'horizontal vertical Center ':

<! DOCTYPE html>

PS:Position: fixed can also be separated from the document stream, so it is the same as absolute, the difference is that fixed is located relative to the browser window.

Method 2:

Method 1: by changing the Document Stream of an element, what about the document stream that changes the element?

We can find another way to calculate the width and height of elements.

What do you mean?

Taking vertical center as an example, if we have a child element, we need to vertically center it in its parent element parent. As follows:

Figure 1

First, we need to move child to the vertex (top, left = 0, as shown in) of the parent element, and to the bottom and right of the parent element to 50% in width, as shown in:

Figure 2

Then, move the Child element to the center of the parent and move it up to 50% higher than the width of the left element to center vertically, as shown in:

Figure 3

Well, we have understood this process. How should we implement it with CSS?

List two:

(1), margin + absolute

Set "child" to "absolute" and set "top" and "right" to "50%", so that the child element layer displays the situation in Figure 2;

Set the margin-top and margin-right of the element to-50%, so that the vertical center can be realized.

The sample code is as follows:

<! DOCTYPE html>

Note:The percentage value of margin is calculated based on the width of the contained block.

In addition, the default browser generally defaults to writing-mode: horizontal-tb and ction: ltr, that is, horizontal layout. Therefore, margin calculates the width of the parent element regardless of width or height. The vertical dimension is calculated based on the height of the parent element.
PS:You can set the vertical layout as follows:
# Demo {
/* For browsers of wekit engine */
-Webkit-writing-mode: vertical-rl;
/* For ie */
Writing-mode: tb-rl;
}
Therefore, in method 2, when using margin + absolute to keep sub-elements in the middle, margin must know the width and height of sub-elements, so do not use percentages.

 

(2), translate + absolute

Set "child" to "absolute" and set "top" and "right" to "50%", so that the child element layer displays the situation in Figure 2;

Then, move the elements 50% and 50% by translate. You can also see Figure 3 to implement vertical center.

The sample code is as follows:

<! DOCTYPE html>

Method 3:

The table-cell attribute can be easily used.

Change the parent element to table-cell, so that you can use the table attributes.Vertical-align: middle,Vertically center the element, and then align the sub-element margin: 0 atuo; horizontally.

PS:Table-cell must be included in the display: table element. table-cell is a table drop.

The sample code is as follows:

<! DOCTYPE html>

Well, the vertical and horizontal center of css is over (flexible layout Flex is not covered in this article ).

Good night, everyone ~