A method for horizontally centering and centering vertically in CSS

Center horizontally

1, using Text-align to achieve the center

Set the property value to center, which is text centered, But it's compatible with most browsers, so it's naturally necessary in some cases.

2. Negative margin

First, create a container that contains the center element, and then position it absolutely at 50% relative to the left edge of the page. The left margin of the container is then calculated from the position of page 50% width. Then, set the container's left margin value to half the width of the negative container. This secures the container to the midpoint in the horizontal direction of the page.

3. Combining automatic margin and text alignment

Because the text alignment is well-backward compatible, and the automatic margin method is also supported by most contemporary browsers, many designers combine the two to allow the center effect to be maximized across browser support.

4, using automatic margin to achieve the center

margin:0 Auto;

5, Elastic box model

If the box is elastic, its size will be calculated as follows:
Specific size declarations (width, height, min-width, min-height, Max-width, max-height);
The size of the parent box and all remaining available internal space
If the box does not have any size declaration, its size will depend entirely on the size of the parent box. That is, the size of the box is equal to the size of the parent box multiplied by the percentage of its box-flex in the sum of all sub-boxes Box-flex (the size of the child box = the size of the parent box * The sum of the Box-flex values of the box-flex/of all the child boxes).
If one or more boxes have a specific size declaration, their size will be counted, and the rest of the elastic boxes will share the rest of the available space according to the above principles.
Look at the following example to make it easier to understand.

Center vertically

1, using row height (line-height) positioning

Line-height is usually used to adjust the distance between lines of text, or the distance between two lines of text, if the line height is 500px, then the text in each row is 250px from the top of the bank, if the line height of the text is set to 500px, And outside the height of the container is also 500px, can also achieve vertical center, but with it to achieve vertical center, there are shortcomings, that is, if the content too much, the text will run to the next line, then the content can not be vertically centered.

2, the use of absolute positioning

This method has a drawback I have to point out that is the outside of the block element, must specify the height, so if you put dynamic content inside, the consequences will be very bad drop!

CSS code:
This vertical centering is achieved with absolute positioning, depending on the width and height of the element, you can use these two formulas to calculate the left and top margins of an element
width of element/2 = negative left margin
Height of element/2 = negative top margin

3, multi-line content center, and the container height variable is also very simple, give the consistent padding-bottom and padding-top on the line.

Advantages: 1. Both block-level and inline-pole element 2 are supported. Support for non-textual content 3. All browser drawbacks are supported: containers cannot have a fixed height.

4, the use of vertical-align to achieve vertical, the decision row height is the highest element in the row value.