div宽高固定（以及不固定）时的水平垂直居中

div固定宽高水平垂直居中

1.第一种方法：.加定位，然后把四个方向清零，然后设置margin:auto;

position:absolute/fixed;
left:0; top:0; right:0; bottom:0;
margin:auto;

2.第二种方法：加定位，然后设置，top：50%；left:50%; margin-top:-value; margin-left:-value;value的值是div自身宽度或高度的一半。

3.第三种方法：弹性盒

display:flex;
justify-content:center;
align-items:center;

4.利用transform,设置如下

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

div宽高不固定的水平垂直居中

1.第一种方法：加定位，四个方向清零，然后设置margin:auto;

position:absolute/fixed;
left:0; top:0; right:0; bottom:0;
margin:auto;

2.第二种方法：加一个空标签，即找一个参照物。给需要居中的div或图片设置vertical-align:middle;然后给这个空标签设置如下(例如是span)

span{display:inline-block; height:100%; vertical-align:middle;}

3.弹性盒：

display:flex;
justify-content:center;
align-items:center;

4.利用transform,设置如下

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