常用的水平垂直居中的几种写法-原创手记-慕课网

方案一：
div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】(需要有width和height)
兼容性：,IE7及之前版本不支持

div{
    width: 200px;
    height: 200px;
    background: green;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

方案二：
div绝对定位水平垂直居中【margin 负间距】这或许是当前最流行的使用方法。

div{
    width:200px;
    height: 200px;
    background:green;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
}

方案三：
div绝对定位水平垂直居中【Transforms 变形】(不需要有width和height)
兼容性：IE8不支持；

div{
    width: 200px;
    height: 200px;
    background: green;
    position:absolute;
    left:50%;    /* 定位父级的50% */
    top:50%;
    transform: translate(-50%,-50%); /*自己的50% */
}

方案四：
flex布局实现(不需要有width和height)

.box{
 height:600px;
 display:flex;
 justify-content:center;//水平方向居中
 align-items:center;//垂直方向居中
   /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>div{
    background: green;
    width: 200px;
    height: 200px;
}

关于flex布局的一些认识
设置在容器上的属性有6种。
flex-direction：决定主轴的方向（即项目的排列方向）
flex-wrap：定义换行情况
flex-flow：flex-direction和flex-wrap的简写-flex-flow: || ;
justify-content：定义项目在主轴上的对齐方式。
align-item：定义在交叉轴上的对齐方式
align-content:定义多根轴线的对齐方式
设置在项目上的属性也有6个。
order：定义项目的排列顺序。
flex-grow：定义项目的放大比例
flex-shrink：定义项目的缩小比例
flex-basis：定义在分配多余空间之前，项目占据的主轴空间。
flex:flex属性是flex-grow，flex-shrink和flex-basis的简写-[];
align-self:允许单个项目与其他项目有不一样的对齐方式,默认值为auto，表示继承父元素的align-items属性，并可以覆盖align-items属性。
flex布局参考文章