CSS垂直居中和水平居中

水平居中

1.行内元素：text-align:center,

2.块级元素：margin:0 auto，

3.若子元素包含 float:left 属性，

父元素

.parent{
      width: -moz-fit-content;
    width: -webkit-fit-content;
    width:fit-content;
    margin:0 auto;
}

4.flex

.son{
    display: flex;
     justify-content: center;
}

5.translate

.son{
    position:absolute;
      left:50%;
      transform:translate(-50%,0);
}

6.margin

.son{
    position:absolute;
    width:定值;
    left:50%;
    margin-left:-0.5倍的宽度;
}

7.absolute

.son{
    position:absolute;
    width:定值;
    left:0;
    right:0;
    margin:0 auto;
}

垂直居中
1)子元素 line-height =父元素高度

2)父元素：

.parent { display: flex; align-items: center;}

3）09版flex

.parent {
      display: box;
      box-orient: vertical;
      box-pack: center;
}

4）transform

.son{
    position:absolute;
    top:50%;
    transform: translate(-50%,-50%);
}

5）

父元素 position:relative

.son{
    position:absolute;
    height:定值;
    top:0;
    bottom:0;
    margin:auto 0;
}