css四种垂直居中方式

一.

(1)margin:auto 法
 

css:
div{
    width: 400px;
    height: 400px;
    position: relative;
    border: 1px solid #465468;
}
img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
html:
<div>
    <img src="mm.jpg">
</div>
//定位为上下左右为0，margin：0 可以实现脱离文档流的居中.

(2)margin 负值法

.container{
    width: 500px;
    height: 400px;
    border: 2px solid #379;
    position: relative;
}
.inner{
    width: 480px;
    height: 380px;    
    background-color: #746;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -190px; /*height 的一半*/
    margin-left: -240px; /*width 的一半*/
}
//补充：这里也可以将marin-top 和margin-left 负值替换成，
//transform：translateX(-50%)和transform：translateY(-50%)

(3)table-cell（未脱离文档流的）

//设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。
css:
div{
    width: 300px;
    height: 300px;
    border: 3px solid #555;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
img{
    vertical-align: middle;
}

(4)利用flex（将父元素设置为display:flex，并且设置align-items:center;justify-content:center;）

css:
.container{
    width: 300px;
    height: 200px;
    border: 3px solid #546461;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.inner{
    border: 3px solid #458761;
    padding: 20px;
}

二.行内块级元素水平垂直居中

1、父级元素设置text-alig：center，然后设置line-height 和vertical-align 使其垂直居中，
最后设置font-size：0 消除近似居中的bug
2、父级元素设置display：table-cell，vertical-align：middle 达到水平垂直居中
3、采用绝对定位，原理是子绝父相，父元素设置position：relative，子元素设置position：
absolute，然后通过transform 或margin 组合使用达到垂直居中效果，设置top：50%，left：
50%，transform：translate（-50%，-50%）
4、绝对居中，原理是当top,bottom 为0 时，margin-top&bottom 设置auto 的话会无限延
伸沾满空间并平分，当left，right 为0 时,margin-left&right 设置auto 会无限延伸占满空
间并平分，
5、采用flex，父元素设置display：flex，子元素设置margin：auto
6、视窗居中，vh 为视口单位，50vh 即是视口高度的50/100，设置margin：50vh auto 0，
transform：translate(-50%)