欢迎使用CSDN-markdown编辑器

水平垂直居中的几种写法

• 容器大小尺寸固定

// width, height 分别为容器的宽高
elem {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -width/2;
    margin-top: -height/2;
}

优点：方法简单， 兼容性好
缺点：容器宽高是要已知固定的，不然就要借助js改变对应margin值

• 容器大小尺寸不固定

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

优点：不要在乎容器的尺寸大小
缺点：css3兼容性问题

• 容器大小尺寸不固定

elem {
    vertical-align: middle;
    text-align: center
}
elem:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle
}

优点：不用在乎容器的尺寸，兼容性好
缺点：max-width只能达到95%左右
实现原理：让容器相对与它的兄弟伪类实现居中对齐