CSS various centering methods

CSS horizontally centered text-align:center and margin:0 auto

Both of these methods are used to center horizontally, the former is set on the parent element and the latter is a child element. The first condition of their function is that the child element must not be affected by float, otherwise everything is useless. margin:0 Auto

Can also be written as margin:0 Auto 0 auto. Children's shoes can not be understood by themselves to find out about the CSS abbreviation for the content.

Vertically centered Line-height

What the?! The margin doesn't work in the vertical center? It is obvious that this is the case, we only have margin:0 auto usage and no auto 0. As for Line-height, he is also acting on the parent element when his value equals the height value of the parent element

, the inner text is automatically centered vertically. There seems to be only words here, sorry.

The Almighty position Dafa

This method can be said to be really omnipotent. When you are troubled by an element that cannot be centered, you can use him decisively, and with almost no sequelae, it is definitely one of the tools that front-end engineers have to travel home.

The specific approach is simple, first of all to write to the parent element positon:relative, so that in order to position:absolute the child elements will not be located in outer space. Next, write the height and width of the child element, which seems to be necessary

, some browsers in the resolution of the time without these 2 values, there will be unexpected dislocation. Then there is the core of the whole method, the top:50%;left:50% and the margin-top of the child elements: the negative number of the half height value;

Margin-left: The negative number of half of the weight value. After tidying up, you may be able to write CSS for your child elements (of course, the parent element must first write the width and height)

{width:100px;height:80px;position:absolute;top:50%;left:50%;margin-left:50px;margin-top:40px}

Next, refresh the page, and your child element is already centered.

The advantage of using this method is that no matter what form of content you can immediately center, and the disadvantage is that the element must have a certain width high value, otherwise you may need to use JavaScript to do some small calculation.

