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

This article mainly introduces what the CSS vertical center realization method has, 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.

Line-height:

Copy the code

The code is as follows:

.content {

Height:240px

Line-height: 240px

}

Vertical-align:middle

: before:

Copy the code

The code is as follows:

.content {

Height: 240px

}

.child: before {

Content:''

Display: block

Height: 120px

}

Vertical-align:middle

Padding-top:

Copy the code

The code is as follows:

.content {

Height:240px

}

.child {

Padding-top: 120px

}

Vertical-align:middle

Position:absolute:

Copy the code

The code is as follows:

.content {

Position:absolute

Height:240px

}

.child {

Position: relative

Top:50%

}

Vertical-align:middle

Display:table-cell

Copy the code

The code is as follows:

# content {

Display:table

}

# child {

Display:table-cell

Vertical-align:middle

Height: 300px

}

Vertical-align:middle

Thank you for reading this article carefully. I hope the article "what are the ways to realize the vertical 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.