不定宽高盒子的垂直水平居中的方法

1、

.father {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width:500px;height: 500px;
}

.child {
    display: inline-block;
}

 

2、

.container {
  　　position: relative;
}
.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

//衍生
inner{margin: auto;position: absolute top: 0; left: 0; bottom: 0; right: 0;}

3、vh和vw是两个比较偏的单位，是指“viewport的height和width的1%”，比如说50vh就是当前视口（窗口的高度，实验中包含了滚动条）高度的50%。也就是说vw将获得和1%差不多的window宽度。

.inner {
   position:fixed;
   top: 50vh;
   left: 50vw;
   transform: translate(-50%, -50%); 
}

　　衍生

　　

 .inner2 {
   position:fixed;
   top: 0;
   left: 0;
   margin: 50vh 0 0 50vw;
   transform: translate(-50%, -50%); 
}

4、

 .father {
        display: flex;
        justfy-content: center;
        align-items: center;
    }