Several methods of css center-cloudification on a daily basis

There are several ways to center css-there are two ways to center the css in the cloud on a daily basis: good white center, water separation, and vertical. The usage frequency is also very high. The following describes several common implementation methods.

Welcome refers to an error in the text. If you have learned a new method, It will be updated later.

1. margin

In this way, only block-level elements with fixed width can be horizontally centered. This method does not take effect if the element is not set to a width or is not a block-level element.

/* Take the p element as an example */p {width: 100px; height: 100px; margin: auto;/* or margin: 0 auto ;*/}

2. line-height

Setting the line-height value of a single line text to the height of its parent element can enable vertical center of the line text, and its limitations are also obvious.

    
Text Content

#container{    height: 30px;}#content{    line-height: 30px;}

3. Table

If you use a table, you can use the align: center and valign: middle attributes of the td element to easily center horizontally and vertically. However, considering that the use frequency of the table layout is very low, it is not practical.

4. display: table-cell

Because cells can be easily horizontally and vertically centered, the parent element container can be simulated as a cell element by using the style text-align: center and vertical-align: to achieve the same effect. However, note that text-align: the center can only center Non-block-level child elements horizontally, and the block-level child elements are invalid.

#table{    display: table-cell;    width: 200px;    height: 200px;    vertical-align: middle;    text-align: center;}

5. Absolute center Positioning

This method uses a relatively large number of resources, but the sub-elements must be fixed in width and height.

Html, body {width: 100%; height: 100%;} body {position: relative;} body> p {position: absolute; width: 100px; height: 100px; left: 50%; top: 50%;/* the element is not centered at this time, and the width is half to the right, if the height is half down * // *, use margin to pull the element back */margin:-50px 0 0-50px ;}

6. translate (-50%,-50%)

This method is quite powerful, but it can be regarded as an improved version of the above absolute positioning method. In the previous method, only elements with fixed width and height can be centered, but transform: translate (-50%,-50%) can be used to center elements with non-fixed height and width. Because the percentage value of the translate attribute is based on itself rather than the parent element, let's look at the Code:

#father{    width: 200px;    height: 200px;    position: relative;}#child{    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%,-50%);    -webkit-transform: translate(-50%,-50%);}