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%);

如有问题,欢迎指正,谢谢 本文为原创,如需转载请注明出处:

推荐阅读