1.绝对定位，left 50%, top 50%, margin-left, margin-top 各-50% ~~~ div {    position:absolute;    left:50%;    top:50%;    margin-left:-50%;    margin-top:-50% } ~~~ 2.绝对定位，top,left 50%, transform: translate(-50%, -50%) ~~~ div {    position:absolute;    left:50%;    top:50%;    transform: translate(-50%, -50%); } ~~~ 3.绝对定位，top,bottom,left,right都为0，margin设为auto ~~~ .parent { position: relative; } .child { position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto; } ~~~ 4.flex布局，display:flex, justify-content,align-items都设为center ~~~ .parent {    width:  200px;    height:  200px;    background-color: pink;    display:  flex;   //当 flex 横向排列时，align-item 指的是垂直方向    align-items:  center;   //当 flex 横向排列时，justify-content 指的是横向方向    justify-content:  center; } ~~~ 5.grid布局，父元素设为display:grid,子元素 margin: auto ~~~ .box {    width: 200px;    height: 200px;    border: 1px solid red;    display: grid; } .children-box {    width: 100px;    height: 100px;    background: yellow;    margin: auto; } ~~~ 6.table-cell方法：父元素display: table-cell, 子元素display改成inline-block，或者margin:auto ~~~ .box {    width: 200px;    height: 200px;    border: 1px solid red;    display: table-cell;    text-align: center;    vertical-align: middle; } .children-box {    width: 100px;    height: 100px;    background: yellow;    display: inline-block;// 可以换成margin: auto; } ~~~