CSS layout--a variety of centers

Centering is what we often encounter with CSS layouts. Using CSS to center, sometimes a property can be done, sometimes it requires a certain skill to be compatible with all browsers, this article on the center of some common methods to do a simple introduction.

Note: In addition to the special description of this article, are compatible with ie6+, Google, Firefox and other mainstream browsers.

Let's start with a few simple, human-friendly centering methods.

1. Set the margin to auto

Specifically, the Margin-left and margin-right of the elements to be centered are set to auto, and this method can only be centered horizontally and is not valid for floating elements or absolutely positioned elements.

2. Use Text-align:center

This is nothing to say, only to the picture, buttons, text, and other inline elements (display for inline or inline-block, etc.) to the horizontal center. But to illustrate in the IE6, 7 of these two wonderful browsers, it can be any element horizontally centered.

3. Use Line-height to center the text vertically in a single line

Set the line-height of the text to the height of the text parent container, which applies to only one line of text.

4. Use the form

If you're using a form, there is no need to worry about the center of the problem, as long as the use of TD (may also use the TH) element of the align= "center" and valign= "middle" These two attributes can be perfect to handle the contents of its horizontal and vertical center problem, and the table defaults to the vertical center of the content inside it. If you want to control the center of the table content in CSS, vertical center can use vertical-align:middle, as for the horizontal center, there is no corresponding attribute in CSS, but in IE6, 7 we can use Text-align: Center to center the elements in the table, ie8+ and Google, Firefox and other browsers text-align:center only for inline elements, invalid for block elements.

In IE6, 7 you can control the horizontal alignment of the table content through CSS Text-algin, regardless of whether the content is inline or block elements are valid.

But in ie8+ and in browsers such as Chrome and Firefox, Text-align:center is not valid for block elements, only the align properties of tables.

5, using Display:table-cell to center

For elements that are not tables, we can simulate them into a table cell by Display:table-cell, so that we can take advantage of the table's convenient centering features. For example:

However, this method can only be used in ie8+, Google, Firefox and other browsers, IE6, IE7 are invalid.

That is a very basic method, which naturally cannot be called a kinky trick, and here are some techniques that need to be used in a centering way.

6, the use of absolute positioning to center

This method applies only to elements that we already know about their width or height.

The principle of absolute positioning is centered by setting the left or top property of this absolutely positioned element to 50%, at which point the element is not centered, but rather a half distance from the width or height of the element to the right or left of the center position. So you need to use a negative margin-left or margin-top value to pull it back to the center position, and the negative margin value takes half of the element's width or height.

Operation Effect:

If you want to be centered only in one direction, you can use left only, margin-left to center horizontally, use top, margin-top to center vertically.

7, another method of using absolute positioning to center

The same method applies only to those elements that we already know about their width or height, and unfortunately it only supports ie9+, Google, Firefox, and other modern browsers that meet the standards of the consortium.

Here's a piece of code to understand this approach:

Operation Effect:

If you do not define the width and height of the element, then his width will be determined by the value of the left,right, and the height will be determined by the value of the Top,bottom, so you must set the height and width of the element. At the same time, if you change the left,right, top, bottom value can also make the element to a certain direction offset, you can try.

8, the use of floating matching relative positioning to the horizontal center

This approach is also about how floating elements are centered horizontally, and we don't need to know the width of the elements that need to be centered.

The principle of floating centered is to position the floating element relative to the width of the parent element 50%. But at this time the element is not centered, but rather than the center of the position more than half the width of its own, then need to have the child inside him again with a relative positioning, the more than half the width of their own to pull back, And because relative positioning is positioned relative to itself, half the width of itself can be obtained by setting the left or right to 50%, so you do not have to know what the actual width is.

The advantage of this method of using the floating fit relative positioning is to not know the width of the element to be centered, even if the width is constantly changing; the disadvantage is that an extra element is needed to wrap the element to be centered.

Look at the code:

Operation Effect:

9, using Font-size to achieve vertical center

If the parent element height is known, you can use this method if you want to center the child elements inside it horizontally, and you don't need to know the width or height of the child elements.

This method is only valid for IE6 and IE7.

The main point of the method is to set a suitable font-size value for the parent element, which is the value of the parent element divided by 1.14, and the child element must be a inline or inline-block element, and the vertical-align should be added: Middle property.

As for why divide by 1.14 rather than the number of others, nobody really knows, you just have to remember the number 1.14.

In method 5 said in ie8+, Firefox Google and so on in the browser can be used to center the Display:table-cell, while the Font-size method is applicable to IE6 and IE7, so the two methods can be compatible with all browsers:

In the example above, because the element to be centered is a block element, we also need to turn it into inline elements, which can be omitted if the element to be centered is an inline element such as a picture.

In addition, if the Vertical-align:middle is written in the parent element and not in the child element, this is also possible, except that the value of 1.14 used to compute font-size will be about 1.5.