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

This article mainly shows you "how to use pure CSS to achieve vertical center", the content is easy to understand, clear, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn "how to use pure CSS to achieve vertical center" this article.

Vertical centering is one of the most common effects in layout. In order to achieve good compatibility, the method of vertical centering on PC side is generally through absolute positioning, table-cell, negative margin and so on. With css3, vertical centering for mobile is more diverse.

Method 1:table-cell

Html structure:

Vertical center

Css:

.box1 {

Display:table-cell

Vertical-align:middle

Text-align:center

}

Method 2:display:flex

.box2 {

Display:flex

Justify-content:center

Align-items:Center

}

Method 3: absolute positioning and negative margin

.box3 {position:relative;}

.box3span {

Position:absolute

Width:100px

Height:50px

Top:50%

Left:50%

Margin-left:-50px

Margin-top:-25px

Text-align:center

}

Method 4: absolute positioning and 0

.box4span {

Width:50%

Height:50%

Background:#000

Overflow:auto

Margin:auto

Position:absolute

Top:0;left:0;bottom:0;right:0

}

This method is similar to the one above, but this is achieved by setting both margin:auto and top,left,right,bottom to 0, which is amazing. However, we have to determine the height of the internal elements, which can be used as a percentage, which is more suitable for the mobile end.

Method 5:translate

.box6span {

Position:absolute

Top:50%

Left:50%

Width:100%

Transform:translate (- 50% Mo Mo 50%)

Text-align:center

}

This is actually a transformation of method 3, and the shift is achieved through translate.

Method 6:display:inline-block

.box7 {

Text-align:center

Font-size:0

}

.box7span {

Vertical-align:middle

Display:inline-block

Font-size:16px

}

.box7: after {

Content:''

Width:0

Height:100%

Display:inline-block

Vertical-align:middle

}

This method is really ingenious. Use: after to occupy a seat.

Methods 7:display:flex and margin:auto

.box8 {

Display:flex

Text-align:center

}

.box8span {margin:auto;}

Method 8:display:-webkit-box

.box9 {

Display:-webkit-box

-webkit-box-pack:center

-webkit-box-align:center

-webkit-box-orient:vertical

Text-align:center

}

Css3 is broad and profound, can achieve a lot of creative effects, and needs to be carefully studied.

Method 9:display:-webkit-box

In this way, a div is inserted outside the content element. Set up this divheight:50%;margin-bottom:-contentheight;.

Content clears the float and displays it in the middle.

Contenthere

.floater {

Float:left

Height:50%

Margin-bottom:-120px

}

.content {

Clear:both

Height:240px

Position:relative

}

Advantages:

For all browsers

When there is not enough space (for example, the window is reduced) the content will not be truncated and the scroll bar will appear.

Disadvantages:

The only thing I can think of is the need for extra empty elements (it's not that bad, it's another topic)

The above is all the content of the article "how to use pure CSS to achieve vertical centering". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.