css常用的几种居中方式

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常用的几种居中方式

推荐阅读

vue+typescript+iview表单验证 this.$refs获取问题

Vue+iview Modal组件爬坑之路(关闭弹框之后报错问题)