CSS居中布局解决方案

HTML 示例代码：

    
Demo

1、水平居中

    解决方案：

    1）`inline-block + text-align`

.parent{
    text-align:center; //对inline类型的子元素有效
}
.child{
    display:inline-block; 
}

    2）`table + margin`

.child{
    display:table;
    margin:0 auto;
}

    3）`absolute + transform`

.parent{
    position:relative;
}
.child{
    position:absolute;
    left:50%;
    transform:translateX(-50%)
}

    4）`flex + justify-content`

.parent{
     display:flex;
     justify-content:center
}
//或者
.parent{
     display:flex;
}
.child{
      margin:0 auto;
}

2、垂直居中

解决方案：

1）table-cell + vertical-align

.parent{
    display:table-cell;
    vertical-align:middle;
}

2）absolute + transform

.parent{
    position:relative;
}
.child{
    position:absolute;
    top:50%;
    transform:translateY(-50%)
}

3）flex + align-item

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

3、居中（水平和垂直居中）

解决方案：

1）inline-block + text-align +table + vertical-align

.parent{
    display:table-cell;
    text-aiign:center;
    vertical-ailgn:middle
}
.child{
    display:inline-block
}

2）absolute + transform

.parent{
    position;relative
}
.children{
    position:absolute;
    top:50%;
    left:50%；
    transform:translate(-50%.-50%)
}

3）flex 布局

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