div相对于父元素水平垂直居中(相对网页水平垂直居中在下面)
-
弹性布局
父元素作为容器设置宽高、弹性布局、水平轴和交叉轴居中
display:flex; justify-content:center; align-items:center;
-
使用CSS3
transform
和 绝对定位父元素有宽高设置相对定位
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相对于网页水平垂直居中
-
使用CSS3
transform
和 绝对定位子元素设置
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;