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

This article mainly explains the "css how to set the page center", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "css how to set the page center" bar!

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Centring is also commonly used in CSS, summing up several familiar writing methods of centering. Of course, there must be more and better ways to write, and you are welcome to correct the inadequacies in the article.

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.

I. level is in the middle

1.1text-align: center

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 you have 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, but the feature is like this.

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

1. Remove the spaces in 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

2. Use negative values of margin

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 dispaly: flex

Only compatible with IE10+

.parent {display:flex; justify-content:center;} / * or * / .child {margin:0 auto;} two, center vertically

1.1display: 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 of the reference is itself * / Thank you for your reading, this is the content of "how to set the page center for css". After the study of this article, I believe you have a deeper understanding of how to set the page center for css, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.