CSS Web page creation: The method and technique of centering Web content

Introduction: Web page production WEBJX article: The center has always been the designers prefer to use a form of placement, whether it is a picture or text will be asked to put in the middle, horizontal or vertical. CSS provides a lot of handy ways to get content centered, and here's a list of the longest-used centering techniques.

Centering has always been a form of placement that designers prefer to use, whether it is a picture or text that is required to be placed in the middle, horizontally or vertically. CSS provides a lot of handy ways to get content centered, and here's a list of the longest-used centering techniques.

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, and 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 elements, this seems to be necessary, some browsers in the resolution if there is no such 2 values, there will be unexpected dislocation. Then there is the core of the whole method, top:50%;left:50% the child elements and Margin-top: The negative number of the half height value; margin-left: The negative number of the half 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.

CSS Web page creation: The method and technique of centering Web content