div水平垂直居中div相对于父元素水平垂直居中 div相对于网页水平垂直居中

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;