盒子居中

第一种方式(盒子宽高已知)

// css 代码
<style>
    .outer-div {
      width: 200px;
      height: 150px;
      border: 1px solid #ccc;
    }
    .inner-div {
      width: 40px;
      height: 40px;
      background: red;
      margin-left: 80px;
      margin-top: 55px;
    }
  </style>
// HTML 代码
<div class="outer-div">
    <div class="inner-div"></div>
</div>
复制代码

• 原理:

 利用margin,
 (外层盒子的宽度 - 内层盒子的宽度)/2 = 内层盒子的margin-left // 水平居中
 (外层盒子的高度 - 内层盒子的高度)/2 = 内层盒子的margin-top // 垂直居中
复制代码

第二种方式(盒子宽高已知)

// css
<style>
    .outer-div {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
      position: relative;
    }
    .inner-div {
      width: 50px;
      height: 50px;
      background: red;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -25px;
      margin-top: -25px;
    }
  </style>
复制代码

• 原理

  利用position
  margin-left 盒子宽度的负一半
  margin-top 盒子高度的负一半
复制代码

第三种方式

<style>
    .outer-div {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
      position: relative;
    }
    .inner-div {
      width: 50px;
      height: 50px;
      background: red;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
复制代码

转载于:https://juejin.im/post/5be2fb7bf265da6130745c17