Use CSS to implement various centering methods

This article mainly introduces the methods of using CSS to achieve various centering. It has certain reference value. Now I share it with you. Friends in need can refer to it.

Centering means we use css to layout. A situation that is often encountered. When using CSS for centering, sometimes a single attribute can do it, and sometimes it requires certain skills to be compatible with all browsers. This article will give a brief introduction to some common methods of centering.

Note: Unless otherwise specified, the methods described in this article are compatible with mainstream browsers such as IE6, Google, and Firefox.

First let’s talk about some simple and harmless centering methods

Set margin to auto

Specifically, it means to put the margin of the element to be centered Both margin-left and margin-right are set to auto. This method can only perform horizontal centering and is invalid for floating elements or absolutely positioned elements.

Use text-align:center

There is nothing to say about this. It can only be used for inline elements such as pictures, buttons, and text (display is inline or inline-block, etc.) for horizontal centering. But it should be noted that in the two weird browsers IE6 and 7, it can horizontally center any element.

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

Set the line-height of the text to the height of the text parent container, which is suitable for situations where there is only one line of text.

4. Use tables

If you are using a table, you don’t have to worry about various centering issues at all, as long as you use the td (may also use th) element align="center" and valign="middle" These two attributes can perfectly handle the horizontal and vertical centering of the content inside it, and the table will be aligned by default. The content inside it is vertically centered. If you want to control the centering of table content in css, you can use vertical-align:middle for vertical centering. As for horizontal centering, it seems that there is no corresponding in css attribute, but in IE6 and 7 we can use text-align:center to horizontally center the elements in the table, IE8 and Google, Firefox and other browsers' text-align: center only works on inline elements and has no effect on block elements.

In IE6 and 7, you can control the horizontal direction of the table content through csstext-algin Alignment works regardless of whether the content is an inline element or a block element.

But in ie8 and chrome, firefox and other browsers, text-align:center is blocky The element is invalid, you can only use the table's own align attribute.

Use display:table-cell to center

For those elements that are not tables, we can use display:table-cell to simulate it as a table cell , so that you can take advantage of the convenient centering feature of the table. For example:


However, this method can only be used on IE8, Google, Firefox and other browsers, and is invalid for IE6 and IE7.

The methods mentioned there are all very basic, and naturally cannot be called fancy tricks. Here are some centering methods that require the use of some skills.

Use absolute positioning for centering

This method only works for elements whose width or height we already know.

The principle of absolute positioning for centering is to set the left or top attribute of the absolutely positioned element to 50%. At this time The element is not centered, but is offset to the right or left from the centered position by half the width or height of the element, so you need to use a negative margin-left or margin- The value of top is used to bring it back to the center position. The negative margin value is half the width or height of the element.

Running effect:

If you only want to achieve centering in one direction, you can only use left, margin- left to achieve horizontal centering, and top, margin-top to achieve vertical centering.

Another method of using absolute positioning to center

This method also only works for elements whose width or height we already know, and unfortunately it only supports IE9, Google , Firefox and other modern browsers that comply with w3c standards.

Let’s use a piece of code to understand this method:

Running effect:

If the width and height of the element are not defined here, then he The width will be determined by the values ​​​​of left and right, and the height will be determined by the values ​​​​of top and bottom, so the height and width of the element must be set. At the same time, if you change the values ​​of left, right, top, and bottom, you can also offset the element in a certain direction. You can try it yourself.

Use floating and relative positioning to perform horizontal centering

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

The principle of floating centering is to position the floating element relatively to the width of the parent element 50%, but at this time the element is not centered yet, but more than the centered position. half of its own width. At this time, the child elements inside it need to use a relative positioning to pull back the extra half of its own width. And because relative positioning is positioned relative to itself, half of its own width is The width can be obtained by setting left or right to 50%, so there is no need to know what the actual width is.

This method of using floating and relative positioning to center has the advantage that you don’t need to know the width of the element to be centered, even if the width is constantly changing; the disadvantage is that it requires an extra element to wrap the element to be centered. Elements.

Look at the code:

Running effect:

Use font-size to achieve vertical centering

If the parent The height of the element is known. If you want to center the child elements inside it horizontally and vertically, you can use this method, and the width or height of the child elements does not need to be known.

This method is only valid for IE6 and IE7.

The key point of this method is to set a suitable font-size value for the parent element. The value of this value is the value obtained by dividing the height of the parent element by 1.14, and the child The element must be an inline or inline-block element, and the vertical-align:middle attribute needs to be added.

As for why it is divided by 1.14 instead of other numbers, no one really knows. You only need to remember the number 1.14.

As mentioned in method 5, it can be used in current browsers such as IE8, Firefox and Google.display:table-cell to perform centering, and the font-size method here is suitable for IE6 and IE7, so combining these 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 it into an inline element. If the element to be centered is an inline element such as a picture, then This step can be omitted.

In addition, if vertical-align:middle is written in the center of the parent, this is a situation we often encounter when using CSS for layout. When using CSS for centering, sometimes a single attribute can do it, and sometimes it requires certain skills to be compatible with all browsers. This article will give a brief introduction to some common methods of centering.

Note: Unless otherwise specified, the methods described in this article are compatible with mainstream browsers such as IE6, Google, and Firefox.

First let’s talk about some simple and harmless centering methods

Set margin to auto

Specifically, it means to put the margin of the element to be centered Both margin-left and margin-right are set to auto. This method can only perform horizontal centering and is invalid for floating elements or absolutely positioned elements.

Use text-align:center

There is nothing to say about this. It can only be used for inline elements such as pictures, buttons, and text (display is inline or inline-block, etc.) for horizontal centering. But it should be noted that in the two weird browsers IE6 and 7, it can horizontally center any element.

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

Set the line-height of the text to the height of the text parent container, which is suitable for situations where there is only one line of text.

4. Use the form

If you are using a table, you don’t have to worry about various centering issues at all. Just use the align="center" of the td (and possibly th) element andvalign="middle" These two attributes can perfectly handle the horizontal and vertical centering of the content inside it, and the table will vertically center the content inside it by default. If you want to control the centering of table content in css, you can use vertical-align:middle for vertical centering. As for horizontal centering, it seems that there is no corresponding in css attribute, but in IE6 and 7 we can use text-align:center to horizontally center the elements in the table, IE8 and Google, Firefox and other browsers' text-align: center only works on inline elements and has no effect on block elements.

In IE6 and 7, you can control the horizontal direction of the table content through csstext-algin Alignment works regardless of whether the content is an inline element or a block element.

But in ie8 and chrome, firefox and other browsers, text-align:center is blocky The element is invalid, you can only use the table's own align attribute.

Use display:table-cell to center

For those elements that are not tables, we can use display:table-cell to simulate it as a table cell , so that you can take advantage of the convenient centering feature of the table. For example:


However, this method can only be used on IE8, Google, Firefox and other browsers, and is invalid for IE6 and IE7.

The methods mentioned there are all very basic, and naturally cannot be called fancy tricks. Here are some centering methods that require the use of some skills.

Use absolute positioning for centering

This method only works for elements whose width or height we already know.

The principle of absolute positioning for centering is to set the left or top attribute of the absolutely positioned element to 50%. At this time The element is not centered, but is offset to the right or left from the centered position by half the width or height of the element, so you need to use a negative margin-left or margin- The value of top is used to bring it back to the center position. The negative margin value is half the width or height of the element.

Running effect:

If you only want to achieve centering in one direction, you can only use left, margin- left to achieve horizontal centering, and top, margin-top to achieve vertical centering.

Another method of using absolute positioning to center

This method also only works for elements whose width or height we already know, and unfortunately it only supports IE9, Google , Firefox and other modern browsers that comply with w3c standards.

The following is a piece of code to understand this method:

Running effect:

If the width and height of the element are not defined here , then its width will be determined by the values ​​​​of left and right, and its height will be determined by the values ​​​​of top and bottom, so the height and width of the element must be set. At the same time, if you change the values ​​of left, right, top, and bottom, you can also offset the element in a certain direction. You can try it yourself.

Use floating and relative positioning to perform horizontal centering

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

The principle of floating centering is to position the floating element relatively to the width of the parent element 50%, but at this time the element is not centered yet, but more than the centered position. half of its own width. At this time, the child elements inside it need to use a relative positioning to pull back the extra half of its own width. And because relative positioning is positioned relative to itself, half of its own width is The width can be obtained by setting left or right to 50%, so there is no need to know what the actual width is.

This method of using floating and relative positioning to center has the advantage that you don’t need to know the width of the element to be centered, even if the width is constantly changing; the disadvantage is that it requires an extra element to wrap the element to be centered.

Look at the code:

Running effect:

Use font-size to achieve vertical centering

If the parent The height of the element is known. If you want to center the child elements inside it horizontally and vertically, you can use this method, and the width or height of the child elements does not need to be known.

This method is only valid for IE6 and IE7.

The key point of this method is to set a suitable font-size value for the parent element. The value of this value is the value obtained by dividing the height of the parent element by 1.14, and the child The element must be an inline or inline-block element, and the vertical-align:middle attribute needs to be added.

As for why it is divided by 1.14 instead of other numbers, no one really knows. You only need to remember the number 1.14.

As mentioned in method 5, it can be used in current browsers such as IE8, Firefox and Google.display:table-cell to perform centering, and the font-size method here is suitable for IE6 and IE7, so combining these 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 it into an inline element. If the element to be centered is an inline element such as a picture, then This step can be omitted.

In addition, if vertical-align:middle is written in the parent element instead of the child element, this is also possible, but when calculating font-size The value of 1.14 used should be changed to a value of approximately 1.5.

The above are some common centering methods. If there are any omissions or errors, please correct them!

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Use css to achieve shadow effects

CSS3 Implement sidebar expansion and collapse animation

The above is the detailed content of Use CSS to implement various centering methods. For more information, please follow other related articles on the PHP Chinese website!