CSS layout artifice: various centers

CSS layout artifice: various centers2017-08-23 Unparalleled front-end development

Unique

Links: www.cnblogs.com/2050/p/3392803.html

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

1. Set Margin to Auto

Specifically, the Margin-left and margin-right of the element to be centered are set to auto, which is only horizontally centered and is not valid for floating elements or absolute positioning elements.

2. 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.) horizontally centered. However, in IE6, 7, these two wonderful browsers, it can be any element in the horizontal center.

3. Use Line-height to align the text of a single line vertically

Sets the line-height of the text to the height of the text 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 all the centering problems, as long as the align= "center" and the Valign= "Middle" of the TD (and possibly the th) elements can perfectly handle the horizontal and vertical centering of the content in it, 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 the CSS, vertical center can use vertical-align:middle, as for the horizontal center, it seems that there is no corresponding property in CSS, but in IE6, 7 we can use the text-align: Center to the table elements in the horizontal center, ie8+ and Google, Firefox and other browser text-align:center only for the elements of the inline function, the block element is not valid.

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

However, in ie8+ and Chrome, Firefox and other browsers text-align:center invalid block elements, can only use the table's own align property.

5, using 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 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.

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 is half 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 the width or height of the element.

Operating effect:

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

7, another method using absolute positioning to center

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.

8. Horizontal centering using 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 of the parent element 50%, 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 him inside the child elements of a relative positioning, the more than half of their own width pull back, And because relative positioning is relative to their own to locate, so half of its width as long as the left or right is set to 50% can be obtained, so do not know the actual width of its 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:

9, using Font-size to achieve vertical center

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 font-size value for the parent element, which is the value of the parent element's height divided by 1.14, and the child element must be an inline or inline-block element, plus vertical-align: The Middle property.

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 here the Font-size method is applicable to IE6 and IE7, so the two methods together 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.

Also, if Vertical-align:middle is written in the parent element rather than in the child element, it is also possible, except that the value of 1.14 used to calculate the font-size is changed to about 1.5.

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

This article number 469, later want to read this article directly enter 469 can

Enter M to get the article directory

recommended ↓↓↓

Web Development

More Testimonials the 18 Technical class public numbers "

Covers: Program life, algorithms and data structures, hacker technology and network security, big Data technology, front-end development, Java, Python, web development, Android Development, iOS development, C/E + +,. NET, Linux, database, operations and so on.

Read the original reading498618 ComplaintsFeatured Message

Write a message

• - Qing Feng transform:translate ( -50%,-50%);

  August 23, 2017

• 7 Wang Yiheng The center must still have display:flex. In the flex layout to achieve the center

  August 23, 2017

• 2 Feng 's been a little bit more knowledgeable about me as a novice.

  August 23, 2017

• 2 Lau Carey?? Flex Dafa Good

  August 23, 2017

• 1 Beginner's mind the first sentence of flex flexible layout is that you are still using div+ floating + positioning to layout? It's out, Flex's all for you.

  August 27, 2017

• 1 Dream girl vertically centered on pseudo elements, horizontally centered across browsers

  August 24, 2017

• 1 Sloan Center I only serve Flex

  August 23, 2017

• Kozhaoyang front-end Daquan The public number has already been sent, you only now hair

  August 23, 2017

• Ateoa The last kind of you. This gives the element to be centered a hierarchy of multiple sets. There is no way to increase the level. 50% of elements can be translated directly by transform

  August 23, 2017

• Liang Wei-wen?? Ie6

  August 23, 2017

The above message is screened by the public number and displayed

Learn more about message features

CSS layout artifice: various centers