<div style="width:200px;margin:0 auto;background-color: yellow;">水平居中</div>

<div style="position: absolute;

     width: 500px;

     height: 300px;

     margin: auto;

     top: 0;

     left: 0;

     bottom: 0;

     right: 0;

     background-color: green;">水平垂直居中</div>

<div style="position: relative;

     width:400px;

     height:200px;

     top: 50%;

     left: 50%;

     margin: -100px 0 0 -200px;

     background-color: red;">水平垂直居中</div>

<div style="position: absolute;

     width:300px;

     height:200px;

     top: 50%;

     left: 50%;

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

     background-color: blue;">水平垂直居中</div>

<div style="display: flex;align-items: center;justify-content: center;">

    <div style="width: 100px;height: 100px;background-color: gray;">flex 布局</div>

</div>