设置宽高
方法一:
.container{

​ position:absolute;

​ width:500px;

​ height:500px;

​ top:50%;

​ left:50%;

​ transform:translate(-50%,-50%);

​ background:#ccc;

}
方法二:
.container{

​ width:200px;

​ height:200px;

​ position:absolute;

​ top:0;

​ left:0;

​ right:0;

​ bottom:0;

​ margin:auto;

}
方法三:
.container{

​ width:200px;

​ height:200px;

​ position:absolute;

​ background:#ccc;

​ top:50%;

​ left:50%;

​ margin-top:-100px;//设置为宽高的一半

​ margin-left:-100px;

}
方法四:

#div1{

​ width:700px;

​ heigth:600px;

​ background:orangen;

​ display:flex;

​ aligin-items:center;

​ justify-content:center;

}

​ width:200px;

​ height:200px;

​ background:orchild;

}
未设置宽高
方法一:

box{

​ position:flex;

​ top:50%;

​ left:50%;

​ background:#ccc;

​ width:50%;

​ height:50%;

​ transform:translateX(-50%) tanslateY(-50%);

}
方法二:

#div1{

​ position:fixed;

​ width:100%;

​ height:100%;

​ top:0;

​ left:0;

}

div2{

​ position:absolute;

​ top:0;

​ left:0;

​ right:0;

​ width:50%;

​ height:50%;

​ margin:auto;

​ bottom:0;

​ background:#ccc;

}

相关文章:

  • 2021-11-12
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-02
  • 2021-11-21
猜你喜欢
  • 2021-11-21
  • 2022-12-23
  • 2021-12-02
  • 2022-12-23
  • 2021-11-21
  • 2022-12-23
  • 2022-02-03
相关资源
相似解决方案