垂直居中的几种实现方式

1、vertical-align: middle

.div {
  display: table-cell;
  vertical-align: middle;        
}

 

2、position

.parent {
    position: relative;
}
.children {
    position: absolute;
    left: 0;    
    top: 0;
    bottom: 0;
    right: 0;
}

 

3、margin + transform

.div {
    margin-top: -50%;
    // 相对于自身高度50%向上偏移
    transform: translateY(-50%);
}

 

4、改变父元素排版书序（父元素添加 .vertical-mode类名）

.vertical-mode {
    // 排版顺序改为竖向
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    // 兼容ie
    writing-mode: tb-rl;
    text-align: center;
}