div相对于父元素水平垂直居中(相对网页水平垂直居中在下面)
弹性布局
父元素作为容器设置宽高、弹性布局、水平轴和交叉轴居中
display:flex;justify-content:center;align-items:center;
使用CSS3transform和 绝对定位
父元素有宽高设置相对定位
position:relative;
子元素设置
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
使用绝对定位
父元素有宽高设置相对定位
position:relative;
子元素设置
position:absolute;top:50%;left:50%;margin-top:-50%子元素宽;margin-left:-50%子元素高;
使用text-align:center; vertical-align:middle;
父元素有宽高设置 \
display:table-cell; text-align:center; vertical-align:middle;
子元素设置
display:inline-block
绝对定位居中(margin:0 auto)
父元素设置相对定位
position:relative;
子元素设置绝对定位
margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;
div相对于网页水平垂直居中
使用CSS3transform和 绝对定位
子元素设置
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
绝对定位居中(margin:0 auto）
子元素设置绝对定位
margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;
