CSS让盒子水平垂直居中的六个方法

方法一 利用定位(常用方法,比较推荐)

      .parent {
        width: 500px;
        height: 500px;
        border: 1px solid #000;
        position: relative;
      }
      .child {
        position: absolute;
        width: 100px;
        height: 100px;
        border: 1px solid #999;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -50px;
      }

方法二 利用margin:auto

      .parent {
        width: 500px;
        height: 500px;
        border: 1px solid #000;
        position: relative;
      }
      .child {
        position:absolute
        width: 100px;
        height: 100px;
        border: 1px solid #999;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }

 方法三 利用display:table-cell

      .parent {
        width: 500px;
        height: 500px;
        border: 1px solid #000;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }
      .child {
        width: 100px;
        height: 100px;
        border: 1px solid #999;
        display: inline-block;
      }

方法四 利用display:flex 设置垂直水平都居中

      .parent {
        width: 500px;
        height: 500px;
        border: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .child {
        position: absolute;
        width: 100px;
        height: 100px;
        border: 1px solid #999;
      }

方法五 计算父盒子与子盒子之间的空间距离 道理如方法一

      .parent {
        width: 500px;
        height: 500px;
        border: 1px solid #000;
      }
      .child {
        width: 100px;
        height: 100px;
        margin-top: 200px;
        margin-left: 200px;
      }

方法六 利用 transform

      .parent {
        width: 500px;
        height: 500px;
        border: 1px solid #000;
        position: relative;
      }
      .child {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }

页面布局如下

    <div class="parent">
      <div class="child">我是子元素</div>
    </div>