适用于固定宽高：
.center1{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width:100px;
height:100px;
}
.center2{
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width:100px;
height:100px;
}
适用于固定宽高和非固定宽高：
.center3{
position:absolute;
width:140px;
height:140px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
- 使用position:absolute以及css3的新属性transform:translate(x,y)
.center4 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.center5{
position:fixed;
width:140px;
height:140px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.center6 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
- 利用伪元素和vertical-align:middle(常用语弹窗居中)
.outbox::before{
content:"";
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
.outbox{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
text-align:center;
}
.content{
width:200px;
height:200px;
background-color:#ccc;
display:inline-block;
vertical-align:middle;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
