元素垂直居中问题归纳

已知宽高的元素居中问题

使用绝对定位和margin负值实现

.wrap {
    position:relative
}

.box {
    position:absolute; 
    top:50%; 
    left:50%; 
    margin-top:-height/2; 
    magrin-right:-width/2;
}

未知宽高的元素居中问题

1. 使用绝对定位和css3属性transform实现

.wrap {
    display: flex;
    justify-content: center; 
    align-items: center;
}

2. 使用flex布局实现

.wrap {
    position:relative
}

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

未知宽高的图片居中问题

绝对定位 top，left，right，bottom均为0， margin为auto

.wrap {
    position:relative
}

.box {
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto;
}

多行文及图片的垂直居中问题

使用table-cell实现

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

.wrap img {
    display:inherit;
}

外部div不能浮动 内部div的vertical-align:middle可以省略，兼容性较好