1、水平居中实现方式及优缺点

[leoyaojy]

使用margin:0 auto实现：

.children{
    width:1000px;
        margin:0 auto;
}

优点：兼容性好 缺点：扩展性差，需要指定宽度

使用inline-block和text-align实现：

.parent{
    text-align:center;
}
.children{
    display:inline-block;
}

优点：兼容性好 缺点：需要同时设置子元素和父元素

使用table实现：

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

优点：只需要对自身进行设置 缺点：IE6、7需要调整结构

使用position:absolute实现：

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

缺点：兼容性差，IE9以下版本不支持

使用flex实现：

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

缺点：兼容性差