元素水平垂直居中

Posted 2020-11-22 tomandjerry

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了元素水平垂直居中相关的知识，希望对你有一定的参考价值。

flex布局，新版本

//css
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  background: red;
  width: 200px;
  height: 200px;
}
//html
<body>
    <div class="box"></div>
</body>

flex布局，老版本

//css
body {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;    
}
.box {
    background: red;
    width: 200px;
    height: 200px;
}
//html
<body>
    <div class="box"></div>
</body>

容器position为absolute

//css
.box {
      background: red;
      width: 200px;
      height: 200px;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
}
//或者
.box {
      background: red;
      width: 200px;
      height: 200px;
      position: absolute;
      left: 50%;
      right: 50%;
      margin-top: -100px;
      margin-left: -100px;
}
//或者
.box {
      background: red;
      width: 200px;
      height: 200px;
      position: absolute;
      left: 50%;
      right: 50%;
      transform: translate(-50%,-50%);
}
//html
<body>
    <div class="box"></div>
</body>

以上是关于元素水平垂直居中的主要内容，如果未能解决你的问题，请参考以下文章

CSS水平居中+垂直居中+水平/垂直居中的方法总结