css常用的几种居中方式,可以直接拿来用
1,position:absolute定位
.box{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
background: red;
}
复制代码
2,position:fixed
.box{
width: 200px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
background: red;
}
复制代码
3,position:fixed, margin:auto
.box{
width: 200px;
height: 200px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: red;
}
复制代码
4,position:absolute, margin:auto
.box{
width: 200px;
height: 200px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: red;
z-index: 11111;
}
复制代码
5,position: absolute, transform: translate
.box{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: red;
}
复制代码
注意: 不同浏览器内核
- -webkit-transform: translateX(-50%) translateY(-50%); // 谷歌
- -moz-transform: translateX(-50%) translateY(-50%); // 火狐
- -ms-transform: translateX(-50%) translateY(-50%);
- transform: translateX(-50%) translateY(-50%);
如有问题,欢迎指正,谢谢 本文为原创,如需转载请注明出处: css常用的几种居中方式