块标签垂直居中的4种方式

方法一：只用给父元素相对定位，子元素设宽高（像素百分比都可以）

设margin:auto; 设置绝对定位；把四个值都设为0；

 

 

 方法二： 父元素设置display:table-cell，vertical-align:middle;

子类设置 margin:0 auto;

 

 

方法三：父元素设置display: flex;

justify-content: center;/*主轴方向居中*/

align-items: center;/*交叉轴方向居中*/

 

 

方法4：父级display:flex(行内元素同样适合于次方法)

子级：margin:auto

 

方法5:父级over-flow：hidden;

子级：position: relative;

margin: 0 auto;

top: 50%;

margin-top: -自身高度的一半;

 

方法3和4移动端首选