标签：cal white 技术 方法 inline rip item roc col
1.table-cell
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box{ width: 200px; height: 200px; background-color: red; display: table-cell; vertical-align: middle; text-align: center; } p{ color: white; } </style> </head> <body> <div class="box"> <p>垂直居中</p> </div> </body> </html>
2.margin-auto
.box p{
margin: auto;
}
3.display-flex
.box2{
display: flex; justify-content:center; align-items:Center;}.box{
text-align:center; font-size:0;}.box p{ vertical-align:middle; display:inline-block; font-size:16px;}.box:after{ content:‘‘; width:0; height:100%; display:inline-block; vertical-align:middle;}.box{
position:relative;
}
.box p{
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
}
6.绝对定位0
.box p{
width: 50%; height: 50%; background: red; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }标签：cal white 技术 方法 inline rip item roc col
原文地址：https://www.cnblogs.com/hapuluosi/p/14686139.html
