本篇文章主要介绍了" 6种不同的CSS实现垂直水平居中"，主要涉及到方面的内容，对于web前端感兴趣的同学可以参考一下：
6种不同的CSS实现垂直水平居中：<!DOCTYPE html><html><head><meta chars...
6种不同的CSS实现垂直水平居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Analytics Model</title>
<style>
.box{
width: 200px;
height: 200px;
background: #cccccc;
margin-top: 10px;
}
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box1 span{
display: inline-block;
}
.box2{
display: flex;
justify-content:center;
flex-direction:column;
text-align: center;
}
.box3{position:relative;}
.box3 div{
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
}
.box3 span{
display: inline-block;
}
.box4{
text-align:center;
font-size:0;
}
.box4 div{
vertical-align:middle;
display:inline-block;
font-size:16px;
}
.box4 span{
display: inline-block;
}
.box4:after{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
.box5{
display: flex;
text-align: center;
}
.box5 div{
margin: auto;
}
.box5 span{
display: inline-block;
}
.box6{
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center;
}
.box6 span{
display: inline-block;
}
</style>
</head>
<body>
<div>
<span>1垂直居中垂直居中垂直居中垂直居中垂直居中</span>
<span>垂直居中</span>
</div>
<div>
<span>2垂直居中垂直居中垂直居中垂直居中垂直居中</span>
<span>垂直居中</span>
</div>
<div>
<div>
<span>3垂直居中垂直居中垂直居中垂直居中垂直居中</span>
<span>垂直居中</span>
</div>
</div>
<div>
<div>
<span>4垂直居中垂直居中垂直居中垂直居中垂直居中</span>
<span>垂直居中</span>
</div>
</div>
<div>
<div>
<span>5垂直居中垂直居中垂直居中垂直居中垂直居中</span>
<span>垂直居中</span>
</div>
</div>
<div>
<span>6垂直居中垂直居中垂直居中垂直居中垂直居中</span>
<span>垂直居中</span>
</div>
</body>
</html>
以上就介绍了 6种不同的CSS实现垂直水平居中，包括了方面的内容，希望对web前端有兴趣的朋友有所帮助。
本文网址链接：http://www.codes51.com/article/detail_4584326.html
