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%);