欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css常用的几种居中方式

程序员文章站 2022-04-24 20:57:16
...

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组件爬坑之路(关闭弹框之后报错问题)