Flex垂直居中（或其他）

    
    
    
    
    



    

        1
    
    
2

    
3
    

image.png

// 用伪类
.middle {
  text-align:center;
}
.middle:before {
  content:'';
  display:inline-block;
  height:100%;
  vertical-align: middle;
}
// 比如是给加了middle 的 class，需要再弄一个
.img {
  vertical-align: middle;
}

// 用表格来渲染 （不太好）
.box {
  width:100px;
  height:100px;
  border:1px solid black;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

// 用css3 的transform
.dialog {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}