使用CSS实现垂直居中的7种方法分享
程序员文章站
2022-04-09 12:00:55
...
今天申请博客通过了，给大家讲讲我所看到过的纯css实现垂直居中的各种方法。为什么要把它作为第一篇文章呢？因为这是我刚开始接触前端学到的对我最有用的知识，希望大家也可以从中获益！
在CSS中实现水平居中是非常简单的，行内元素设置其父元素的text-align:center，块级元素就对其自身应用magrin:auto。然而，实现垂直居中就有点麻烦了，首先它是极其常见的需求，看似简单，在实践中，往往难如登天，当设计尺寸不固定时尤其如此。以下是我找到的一些方法：
方法一：行高line-height
（1）单行文本居中
HTML代码
<p class="box1"> <p class="box2">垂直居中</p> </p>
CSS代码
.box1{
height: 200px;
}
.box2{
line-height: 200px;
}
（2）图片垂直居中
HTML代码
<p class="box1"> <img src="images/bg-sun.png" alt=""> </p>
CSS代码
.box1{
line-height:200px;
}
.box1 img{
vertical-align: middle;
}
方法二：table-cell
CSS代码
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法三：display:flex
（1）CSS代码
.box1{
display: flex;
}
.box2{
margin:auto;
}
（2）CSS代码
.box1{
display: flex;
justify-content:center;
align-items:center;
}
方法四：绝对定位和负边距
（1）CSS代码
.box1{
position: relative;
}
.box2{
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;/*减去子元素高度一半*/
margin-left:-32px;/*减去子元素宽度一半*/
}
（2）CSS代码
.box2{
position: absolute;
top:calc(50% - 10px);/*减去子元素高度一半*/
left:calc(50% - 32px);/*减去子元素宽度一半*/
}
方法五：绝对定位和0
CSS代码
.box2{
width: 50%;
height: 50%;
background: #555;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
方法六：translate
（1）CSS代码
.box2{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
（2）HTML代码
<body> <p class="box1"> </p> </body>
CSS代码
.box1{
width: 200px;
height: 200px;
background: #666;
margin: 50vh auto 0;
transform: translateY(-50%);
}
方法七：display:-webkit-box
CSS代码
.box2{
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center7 }
以上就是使用CSS实现垂直居中的7种方法分享的详细内容，更多请关注其它相关文章！
上一篇： 超实用的6个php功能代码总结
下一篇： PHP实现支持透明的png图像缩放