Using CSS to implement various centering methods

This article mainly introduces the use of CSS to achieve a variety of the center of the method, has a certain reference value, now share to everyone, the need for friends can refer to

Centering is often the case when we use CSS to lay out the layout. When using CSS to center, sometimes a property can be done, and sometimes require a certain skill to be compatible with all browsers, this article on the center of some common methods to do a simple introduction.

Note: The method described in this article, in addition to special instructions, are compatible with ie6+, Google, Firefox and other mainstream browsers.

First, a few simple, animal-friendly centering methods

Set margin to Auto

In particular, the and of the elements to be centered are margin-left margin-right set to auto , this method can only be horizontally centered, and is not valid for floating elements or absolute positioning elements.

Using Text-align:center

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

Use Line-height to center the text of a single line vertically

Sets the text line-height to the height of the parent container, and applies to cases where there is only one line of text.

4. Use the form

If you're using a table, that doesn't bother with any kind of centering problem, as long as the TD (and possibly the th) element align="center" and valign="middle" the two properties can perfectly handle the horizontal and vertical centering of the content. and the table defaults to the vertical center of the content inside it. If you want to css control the table content in the center, vertical center can be used vertical-align:middle , as for the horizontal center, it seems that css there is no corresponding property, but in IE6, 7 we can use text-align:center to the table elements in the horizontal center, ie8+ and Google, Browsers such as Firefox text-align:center only work on inline elements and are not valid for block elements.

In IE6, 7, you can css text-algin control the horizontal alignment of the contents of the table, regardless of whether the content is inline or block elements.

However, in ie8+ and, in the browser, the chrome firefox text-align:center block element is invalid, only the table has its own align properties.

Use Display:table-cell to center

For those elements that are not tables, we can display:table-cell simulate them into a table cell so that we can take advantage of the convenient centering feature of the table. For example:


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

That said is a very basic method, nature can not be called inventions, the following are some of the need to use some of the techniques of the center method.

Use 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 to be centered by setting the attribute of the absolute positioning element, which is left top 50% not centered, but half the distance to the right or left of the element than the center position, so it is necessary to use a negative margin-left or margin-topvalue to pull it back to the center position, the negative margin value takes half the width or height of the element.

Operating effect:

If you only want to achieve the center of a direction, you can use only to left margin-left achieve horizontal centering, using top , margin-top to achieve vertical centering.

Another way to center with absolute positioning

The same 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 Internet.

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

Operating effect:

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

Horizontal centering using a floating mate relative positioning

This method is also a workaround for how the floating element is centered horizontally, and we do not need to know the width of the element that needs to be centered.

Floating centering principle is: The floating element relative to the width 50% of the parent element, but this time the element is not centered, but more than the center of the position of its own half of the width, then it is necessary for his child elements in a relative positioning, the more than half of their own width pull back, And because the relative positioning is relative to their own to locate, so half the width of itself as long as the set left or right can be 50% obtained, so do not know the actual width of their own how much.

The advantage of this method of centering with a floating fit relative to the position is that you don't have to know the width of the element to be centered, even if the width is constantly changing, and the disadvantage is that you need an extra element to wrap the element to be centered.

Look at the code:

Operating effect:

Use Font-size to achieve vertical centering

If the parent element height is known, you can use this method to center the child elements in it horizontally vertically, and you do not have to know the width or height of the child elements.

This method is only valid for IE6 and IE7.

The main point of this method is to set a proper value for the parent element, which is the value font-size of the parent element divided by 1.14, and the child element must be one inline or inline-block the element, and the attribute needs to be added vertical-align:middle .

As for why it is divided by 1.14 and not the other number, no one really knows, you just have to remember 1.14 this number on the line.

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

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

In addition, if vertical-align:middle it is written in the parent center is the situation we often encounter using CSS to layout. When using CSS to center, sometimes a property can be done, and sometimes require a certain skill to be compatible with all browsers, this article on the center of some common methods to do a simple introduction.

Note: The method described in this article, in addition to special instructions, are compatible with ie6+, Google, Firefox and other mainstream browsers.

First, a few simple, animal-friendly centering methods

Set margin to Auto

In particular, the and of the elements to be centered are margin-left margin-right set to auto , this method can only be horizontally centered, and is not valid for floating elements or absolute positioning elements.

Using Text-align:center

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

Use Line-height to center the text of a single line vertically

Sets the text line-height to the height of the parent container, and applies to cases where there is only one line of text.

4. Use the form

If you're using a table, that doesn't bother with any kind of centering problem, as long as the TD (and possibly the th) element align="center" and valign="middle" the two properties can perfectly handle the horizontal and vertical centering of the content. and the table defaults to the vertical center of the content inside it. If you want to css control the table content in the center, vertical center can be used vertical-align:middle , as for the horizontal center, it seems that css there is no corresponding property, but in IE6, 7 we can use text-align:center to the table elements in the horizontal center, ie8+ and Google, Browsers such as Firefox text-align:center only work on inline elements and are not valid for block elements.

In IE6, 7, you can css text-algin control the horizontal alignment of the contents of the table, regardless of whether the content is inline or block elements.

However, in ie8+ and, in the browser, the chrome firefox text-align:center block element is invalid, only the table has its own align properties.

Use Display:table-cell to center

For those elements that are not tables, we can display:table-cell simulate them into a table cell so that we can take advantage of the convenient centering feature of the table. For example:


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

That said is a very basic method, nature can not be called inventions, the following are some of the need to use some of the techniques of the center method.

Use 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 to be centered by setting the attribute of the absolute positioning element, which is left top 50% not centered, but half the distance to the right or left of the element than the center position, so it is necessary to use a negative margin-left or margin-topvalue to pull it back to the center position, the negative margin value takes half the width or height of the element.

Operating effect:

If you only want to achieve the center of a direction, you can use only to left margin-left achieve horizontal centering, using top , margin-top to achieve vertical centering.

Another way to center with absolute positioning

The same 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 Internet.

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

Operating effect:

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

Horizontal centering using a floating mate relative positioning

This method is also a workaround for how the floating element is centered horizontally, and we do not need to know the width of the element that needs to be centered.

Floating centering principle is: The floating element relative to the width 50% of the parent element, but this time the element is not centered, but more than the center of the position of its own half of the width, then it is necessary for his child elements in a relative positioning, the more than half of their own width pull back, And because the relative positioning is relative to their own to locate, so half the width of itself as long as the set left or right can be 50% obtained, so do not know the actual width of their own how much.

The advantage of this method of centering with a floating fit relative to the position is that you don't have to know the width of the element to be centered, even if the width is constantly changing, and the disadvantage is that you need an extra element to wrap the element to be centered.

Look at the code:

Operating effect:

Use Font-size to achieve vertical centering

If the parent element height is known, you can use this method to center the child elements in it horizontally vertically, and you do not have to know the width or height of the child elements.

This method is only valid for IE6 and IE7.

The main point of this method is to set a proper value for the parent element, which is the value font-size of the parent element divided by 1.14, and the child element must be one inline or inline-block the element, and the attribute needs to be added vertical-align:middle .

As for why it is divided by 1.14 and not the other number, no one really knows, you just have to remember 1.14 this number on the line.

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

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

In addition, if it vertical-align:middle is written in the parent element, but not in the child element, it is also possible, but the calculation font-size of the use of the value of 1.14 to become about 1.5.

These are some common centering methods, if there are omissions or errors, please correct me!

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!