Home > Article > Web Front-end > css vertical centering implementation code
This article mainly shares with you the css vertical centering implementation code. I hope this css code can help everyone.
The case is as follows:
.verticle{ height: 100px; line-height: 100px;}
The case is as follows:
.container { position: relative; }.vertical { width : 300px; /*子元素的宽度*/ height: 300px; /*子元素高度*/ position: absolute; top:50%; /*父元素高度50%*/ left: 50%; margin-left: -150px; margin-top: -150px; /*自身高度一半*/}
The case is as follows:
.container { position: relative; }.vertical { position:absolute; top: 50%; left:50%; transform:translate(-50%,-50%);}
case is as follows:
.content{ display:flex; justify-content: center; /*子元素水平居中*/ align-items: center; /*子元素垂直居中*/}
The case is as follows:
.container { display: table;}.content { display: table-cell; vertical-align: middle; }
Related recommendations:
6 CSS horizontal and vertical centering solutions
4 ways to achieve CSS horizontal and vertical centering
How to vertically center img and span in div
The above is the detailed content of css vertical centering implementation code. For more information, please follow other related articles on the PHP Chinese website!