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

div相对于父元素水平垂直居中(相对网页水平垂直居中在下面)

1. 弹性布局

   父元素作为容器设置宽高、弹性布局、水平轴和交叉轴居中

   display:flex;
   justify-content:center;
   align-items:center;
   

2. 使用CSS3 transform 和 绝对定位

   父元素有宽高设置相对定位

   position:relative;
   

   子元素设置

   position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
   

3. 使用绝对定位

   父元素有宽高设置相对定位

   position:relative;
   

   子元素设置

   position:absolute;top:50%;left:50%;margin-top:-50%子元素宽;margin-left:-50%子元素高;
   

4. 使用 text-align:center; vertical-align:middle;

   父元素有宽高设置 \

   display:table-cell;  text-align:center;  vertical-align:middle;
   

   子元素设置

   display:inline-block
   

5. 绝对定位居中(margin:0 auto)

   父元素设置相对定位

   position:relative;
   

   子元素设置绝对定位

   margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;
   

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

1. 使用CSS3 transform 和 绝对定位

   子元素设置

   position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
   

2. 绝对定位居中(margin:0 auto）

   子元素设置绝对定位

   margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;