CSS实现水平垂直居中

 水平居中

 1、行内元素

text-align:center;

 2、块级元素

宽度确定

    ①width+margin:0 auto;

        低版本浏览器可以使用text-align:center;

    ②position+margin

宽度不确定

    ①position+transform

    ②display:flex+justify-content:center

    ③display:table+margin:0 auto

    ④display:inline-block+text-align:center

垂直居中

1、行内元素

单行文字垂直居中

height=line-height

2、块级元素

多行文字垂直居中

.parent {

    width: 500px;

    height: 500px;

    background: orange;

    display: table;

}

.child {

    width: 200px;

    height: 200px;

    display: table-cell;

    vertical-align: middle;

}

①display:flex+align-items:center;

display:flex;

justify-content:center;

align-items:center;

    缺点：兼容性不好

    兼容性写法：https://www.jianshu.com/p/49cdc1a0b69b

②position+反向margin 

position: absolute;

top: 50%;

left: 50%;

margin-left: div-left;

margin-top: div-top;

    优点：兼容性不错

    缺点：需要提前知道尺寸，margin-top: -(高度的一半); margin-left: -(宽度的一半);

③position+transform

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

    优点：不需要提前知道尺寸

    缺点：兼容性不好

④position+margin：auto ***

position: absolute;

left: 0;

top: 0;

right:0;

bottom: 0;

margin: auto;

    优点：不需要提前知道尺寸，兼容性好

5、display:table-cell+vertical-align: middle

.parent {

    width: 500px;

    height: 500px;

    background: orange;

    display: table-cell;

    vertical-align: middle;

}

.child {

    width: 200px;

    height: 200px;

    background: pink;

    margin: 0 auto;   

}

6、padding

    高度固定的情况下可以使用，需要计算尺寸