如何让不定宽高的div水平垂直居中

1、使用定位，只需要给父元素添加position: relative，子元素添加position:absolute，（需要给子盒子添加top:50%;left:50%）之后使用transform: translate(-50%, -50%)即可。

        div{
        position:absolute;
        top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
        }  

 2、 使用flex,让其X,Y轴元素居中  

 ``` bash  
   div {
   display: flex;
   justify-content:center; //子元素水平居中
   align-items:center; //子元素垂直居中
 }  

 ```

3、将子盒子转成行内块元素，给父元素添加text-align: center;  



   ``` bash 
  line-height: 700px，让子盒子水平居中
   .box {
   width: 500px;
   height: 700px;
   border: 1px solid #000;
   text-align: center;
   line-height: 700px;
   /* 让图片水平居中 */
        }

  .content{
  width: 200px;
  height: 200px;
  display: inline-block;//转成行内块元素   
  vertical-align: middle;//控制行内块的对齐方式中线对齐
  background-color: pink;
}

​

---