Shulou(Shulou.com)06/03 Report--

This article is to share with you the content of sample analysis of various ways of centering in CSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Note: except for special instructions, the methods mentioned in this article are compatible with mainstream browsers such as IE6+, Google, Firefox and so on.

Let's start with a few simple, harmless methods of centring.

1. Set margin to auto

Specifically, both the margin-left and margin-right of the element to be centered are set to auto, which can only be centered horizontally and has no effect on floating or absolute positioning elements.

2. Use text-align:center

There is nothing to say about this, but to center horizontally on inline elements such as pictures, buttons, text (display is inline or inline-block, etc.). But it is important to note that in the two weird browsers, IE6 and 7, it can center any element horizontally.

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

Set the line-height of the text to the height of the parent container of the text, which is applicable when there is only one line of text.

4. Use the form

If you are using a table, then you don't have to worry about all kinds of centering problems at all, as long as you use the align= "center" and valign= "middle" attributes of the td (or th) elements, you can perfectly handle the horizontal and vertical centering of its contents, and the table will center the contents vertically by default. If you want to center the contents of the table in css, you can use vertical-align:middle for vertical centering. As for horizontal centering, there seems to be no corresponding attribute in css, but in IE6, 7, we can use text-align:center to center horizontally on the elements in the table. Text-align:center of IE8+ and browsers such as Google and Firefox only works on inline elements, not on block elements.

In ie6, 7, you can control the horizontal alignment of the table content through css's text-algin, whether the content is an inline element or a block element.

However, text-align:center in ie8+ and browsers such as chrome and firefox has no effect on block elements and can only use the align attribute of the table itself.

5. Use display:table-cell to center

For those elements that are not tables, we can simulate it as a table cell through display: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 on browsers such as IE8+, Google and Firefox, and IE6 and IE7 are invalid.

What is said on that side is a very basic method, and naturally it cannot be called a whimsical trick. Here are some centring methods that need to use some skills.

6. Use absolute positioning to center

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

The principle of absolute positioning is to center by setting the left or top attribute of the absolute positioning element to 50%. At this time, the element is not centered, but deviates half the width or height of the element to the right or left than the center position, so you need to use a negative margin-left or margin-top value to pull 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 center in one direction, you can use only left, margin-left to center horizontally, and top and margin-top to center vertically.

7. Another method of centering using absolute positioning

This method also applies only to elements that we already know their width or height, and unfortunately it only supports IE9+, Google, Firefox and other modern browsers that meet the W3C standard.

Use 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 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 values of left,right, top, and bottom to offset the element in a certain direction, you can try it yourself.

8. Use floating fit relative positioning to center horizontally

This method is also a solution to 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 center is that the floating element is relatively positioned to 50% of the width of the parent element, but at this time the element is not centered, but is half wider than the central position. At this time, it is necessary for the child element in it to use a relative positioning to pull back the extra half of its width, because the relative positioning is relative to itself. So you can get half of your width by setting left or right to 50%, so you don't have to know what your actual width is.

This method of centering with floating and relative positioning has the advantage of not knowing 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.

Take a look at the code:

Running effect:

9. Use font-size to achieve vertical centering

If the height of the parent element is known, you can use this method to center the child elements horizontally and vertically without knowing 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 an appropriate font-size value for the parent element, which is the value obtained by dividing the height of the parent element by 1.14, and the child element must be an inline or inline-block element with a vertical-align:middle attribute.

As for why it is divided by 1.14 rather than any other number, no one really knows, you just need to remember the number 1.14.

In method 5, it is said that display:table-cell can be used to center in browsers such as IE8+ and Firefox Google, while the font-size method here is suitable for IE6 and IE7, so combining these two methods will 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, we can omit this step.

In addition, this is fine if the vertical-align:middle is written in the parent element instead of the child element, except that the value of 1.14 used to calculate the font-size should be about 1.5.

Thank you for reading! This is the end of this article on "sample Analysis of various centring ways in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.