What are the implementation methods of vertical centering of CSS
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!
