Something about horizontal centering of css_html/css_WEB-ITnose

I wrote about the vertical centering of CSS late last night, and tonight it’s time to write about its brother: the horizontal centering of CSS. . …^^

Actually, these two could be written together, but in order to avoid confusion and to make the ideas clearer, I finally decided that it would be better to write them separately. . . This will also help you review it in the future~~

1. text-align

Why should I be the first one? What about writing text-align?

Actually, there is no reason. . . . . (Don’t hit me)

But text-align is a very magical thing. You will be surprised if you use text-align in ie6

Text-align means centering the text. It is to make a The inline content of block-level elements is aligned, so normally, text-align only works on inline content, not block-level content.

But ie is a magical thing and is quite willful. . . In mixed mode in IE6 and IE7, text-align:center can center block-level elements. . . It's amazing! But in other browsers it can only work on inline elements.

Second, margin

In terms of centering block-level elements, I think using margin: 0 auto will be an ideal method. It is recommended. We have used this method often enough, so I won’t explain it in detail

Some friends use float to align elements or multiple columns, but after setting float, they want to center it. Margin is useless. At this time, to center the element, you can use negative margins or give the float element a container and then use margin.

Third, use negative margins

When it comes to vertical centering in css, there is talk of using negative margins The problem of vertically centering block-level elements, so naturally, using negative margins can also center block-level elements horizontally

First set position: absolute, and then offset the element by 50% like: left: 50% , and finally use margin-left in reverse, which is equal to half the width of the block-level element. margin-left: -1/2height can center the element horizontally

I won’t say much about the displacement reference element of position: abs. If you don’t understand, please refer to CSS vertical centering. I think I explained it quite clearly. . . Hahaha

Fourth, use flexible-box

This is also what I talked about in the previous article The method is a bit lazy, I just give the method

First, you need to give the element to be centered a flex box container: -webkit-display:box and then set box-pack: center to center the element horizontally

If you don’t understand, please search for the basic knowledge of retractable boxes by yourself, but this style is mostly used on mobile phones, and the compatibility with browsers is not very good.

Digression:

A very amazing thing, there are 4 methods for horizontal centering and vertical centering. There are many methods for horizontal centering. If we encounter other horizontal centering methods in the future, we will update this article from time to time.

I am a front-end rookie, so flaws are inevitable. Please don’t criticize me if you don’t like it^^

This article is an original work and is not allowed to be reproduced without permission. Thanks!