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

This article mainly introduces the methods to achieve the center of CSS, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Suppose this scenario is given now:

DEMO

The length of the content in the class='child' div is not certain, and now you need to implement the center of the div.

Horizontal Center 1.1 display: inline-block

To center inline elements or class inline elements in a block-level parent container, simply use text-align: center

This approach centers inline/inline-block/inline-table/inline/flex.

The .child {display:inline-block; / * child element text inherits from the center, so center * / text-align:left;}. Parent {text-align:center;} on it

When there are multiple child div, if you set display: inline-block, you need to pay attention to the gap between each div, this is not a bug, this is the feature.

If you want to remove these gaps, there are several solutions:

1. Remove the spaces in the HTML.

The reason for the white space between elements is the gap between the tag segments, which only needs to be removed from the HTML.

For example, this way of writing, of course, there are many ways to write, as long as you make sure that the gap is removed, but this method always feels a bit anti-human.

DEMO1 DEMO2 DEMO3

two。 Use negative margin values

The negative value of this method is not easy to determine, and it has something to do with the font of the context, and so on, this method is not suitable for large-scale use.

.child {margin-right;-5px;}

3. Use font-size: 0

This method can easily solve this spacing problem by setting the font-size of the parent div to 0, and then remember to set the font-size property of the child div back.

.parent {font-size: 0;} .chilc {font-size: 16px;}

4. Use letter-spacing or word-spacing

.parent {letter-spacing:-5px; / * or * / word-spacing:-5px;} .chilc {letter-spacing: 0; / * or * / word-spacing: 0;} 1.2 display:table

The width of the table element also follows the content, with margin in the center. Compatible with IE8.

If you don't set it to table, you can set it to another block-level element, but emphasize setting the width width, otherwise it will stretch to the width of the parent element. (note that the scalability of width is not good, and if the content in child div is very long, it may exceed the width of the set width.)

.child {display:table; margin:0 auto;} 1.3 position: absolute

The width of the absolute element is also determined by the content by default.

The advantage of this method is that the centered element will not affect other elements and deviate from the normal flow.

.parent {position:relative;} .child {position:absolute; / * reference is the parent container * / left:50%; transform:translateX (- 50%); / * the percentage reference is itself * / 1.4 dispaly: flex

Only compatible with IE10+

.parent {display:flex; justify-content:center;} / * or * / .child {margin:0 auto;} 2. Vertically centered 2.1 display: table-cell

You can center elements of different heights vertically.

.parent {display:table-cell; vertical-align:middle;} 2.2 position: absolute.parent {position:relative;} .child {position:absolute; top:50%; / * reference is the parent container * / transform:translateY (- 50%); / * the percentage reference is itself * /} 2.3 display: flex

Only compatible with IE10+

.parent {display:flex; align-items:center;} / * or * / .child {margin:0 auto;} 3. Horizontal and vertical center

This only needs to be a combination of the first few, there are three common methods.

3.1 inline-block + table-cell.child {display:inline-block; text-align:left;} .parent {text-align:center; display:table-cell; vertical-align:middle;} / * child element text is inherited and centered, so write left center on it * / 3.2 absolute + transform.parent {position:relative;} .child {position:absolute; left:50%; top:50% / * the reference is the parent container * / transform:translate (- 50% won 50%); / * the reference of the percentage is itself * /} 3.3 flex + align-items + justify-content.parent {display:flex; justify-content:center; align-items:center } Thank you for reading this article carefully. I hope the article "what are the ways to achieve the center of CSS" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.