前端居中

前端布局居中，在这个基础上实现的（例子都是对的）

<div class="father">

      <div class="son"></div>

</div>

1. 利用position，前提是表明长宽

例子：

.father{position:relative}

.son{width:100px;height:100px;position:absolute;left:0;right:0;bottom:0;top:0;margin:auto;}

2.在第一个方法的基础上，在页面中居中

    html {

      width: 100%;

      height: 100%;

      background-color: slategray;

      position: relative;

    }

    .son {

      position: absolute;

      left: 0;

      right: 0;

      bottom: 0;

      top: 0;

      margin: auto;

      width: 100px;

      border: thistle 1px solid;

      height: 100px;

}

3利用弹性布局

3.1 父级是弹性布局，子级只需要margin:auto

.father {

      width: 300px;

      height: 300px;

      background-color: slategray;

      display: flex;

    }

    .son {

      margin: auto;

      width: 100px;

      border: thistle 1px solid;

      height: 100px;

    }

3.2 父级填写display: flex;  align-items: center;      justify-content: center;即可 子级不用

.father {

      width: 300px;

      height: 300px;

      background-color: slategray;

      display: flex;

      align-items: center;

      justify-content: center;

    }

    .son {

      width: 100px;

      border: thistle 1px solid;

      height: 100px;

    }