Method of horizontal vertical centering of CSS elements (with inline elements, basic concepts of block-level elements)

It's not easy to use CSS to center an element in a display. The same CSS centering settings in different browsers also have their own performance. This article introduces several common methods for displaying elements horizontally in CSS.

　　1. Centering with automatic margin

The preferred way to center elements horizontally in CSS is to use the margin property-set the Margin-left and Margin-right properties of the element to auto. In practical use, we can create a container-scoped div for these elements that need to be centered. It is important to note that you must specify a width for the container:

　　

In most major browsers, this approach is very effective, even in the Windows platform IE6, in its standard compatibility mode (compliance mode) can be displayed normally. Unfortunately, in the lower version of IE, this setting does not achieve a center effect. So if you want to use this approach in a real project, make sure that the user's IE browser version is no less than 6.0.

Although not satisfactory in terms of support, most designers recommend using this approach as much as possible. This method is also considered to be the most correct and reasonable one in all kinds of CSS to implement the horizontal centering method of elements.

　　2. Using Text-align to achieve centering

Another way to center the element is to use the Text-align property, set the property value to center, and apply it to the BODY element. This approach is downright hack, but it is compatible with most browsers, so it is naturally necessary in some cases.

It is hack because this method does not apply the text attribute to the text, but instead applies it to the element that is the container. This also brings us extra work. After creating the div necessary for the layout, we will apply the Text-align property to the body as follows:

　　

What happens after that? All descendant elements of the body are displayed in the center.

Therefore, we need to write another rule to get the text back to the default left-aligned:

　　

It can be imagined that this additional rule will bring some inconvenience. In addition, a browser that truly complies with the standard does not change the location of the container, but only the text that is centered on it.

　3. Combining automatic margins with text alignment

Because the text alignment is well-backward compatible, and the automatic margin method is also supported by most contemporary browsers, many designers combine the two to maximize the cross-browser support for the center effect:

　　

But it's always a hack, but it's not perfect anyway. We still need to write additional rules for the text in the center container, but at least it looks good in every browser.

　　4. Negative margin Solution

A negative margin solution is far from simply adding negative margins to elements. This approach requires both absolute positioning and negative margin techniques.

The following is a concrete implementation of this scenario. First, create a container that contains the center element, and then position it absolutely at 50% relative to the left edge of the page. The left margin of the container is then calculated from the position of page 50% width.

Then, set the container's left margin value to half the width of the negative container. This secures the container to the midpoint in the horizontal direction of the page.

　　

While this is not the preferred solution, it is a good approach and has a wide applicability.

Method of horizontal vertical centering of CSS elements (with inline elements, basic concepts of block-level elements)