CSS实现水平居中，垂直居中，水平垂直居中(强迫症福利)

前言

在我们的平常项目里，页面布局中经常要把一些字，图，div等等居中，贴近用户的审美，我们自然也用到了很多种方法去实现，接下来我想做个系统的总结，帮助自己加深记忆，也希望能帮助到你们。 首先给出下列所有例子共有的html结构：外部div:parent+内部元素son,son是什么元素呢？请看下面具体情景分析：

元素水平居中

水平居中的方式有很多，但是因为元素不同的特性，它所适用的方法不多，所以下面按不同的元素带出对应的解决方法。

1).son是文本/行内元素/行内块级元素

.parent{
    text-align: center;
}

局限性在于只能对行内内容有效，且子元素宽度应该小于父元素宽度，否则无效。

2).son是块级元素

.son{
    margin: 0 auto;
}

3).son是任意元素

• flex布局:局限在于兼容性不好，但是功能强大

.parent{
    display: flex;/*给父容器开启flex布局*/
    justify-content: center;/*让容器下的布局在主轴居中 */
}

• transform+absolute:就算不知道元素宽高也可以使用，但是transform也是存在兼容性问题(IE9+),而且代码较多；脱离文档流。

.parent{
    position: relative;
}
.son{
    position: absolute;
    left: 50%;/*先根据父元素偏移他的一半*/
    transform: translateX(-50%);/*再根据自身的宽度反向偏移一半*/
}

• **利用绝对定位元素的特性:宽度由内容撑开:**局限性在于需要确定元素的宽高才可以使用。

.parent{
    position: relative;
}
.son{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

元素垂直居中

同样也是不同的元素适用的情况不同，接下来按情况讨论：

1).son是文本/行内元素/行内块级元素

这里利用line-height，因为line-height的最终表现是通过inline box实现的，而无论inline box所占据的高度是多少（无论比文字大还是比文字小），其占据的空间都是与文字内容公用水平中垂线的。

.parent{
    height: 200px;
    line-height: 200px;/*让line-height=height*/
}

局限性在于需要知道父元素的高度才能使用

2).son是块级元素

可以使用table-cell,使表格内容对齐方式为middle

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

3).son是任意元素

• **transform+absolute:**局限性跟水平垂直类似，只是改变了方向。

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

• **利用绝对定位元素的特性:宽度由内容撑开:**局限性还是在于需要确定元素的宽高才可以使用。

.parent{
    position: relative;
}
.son{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

• flex布局

.parent{
    display: flex;
    align-items: center;/*让项目在侧轴方向居中*/
}

元素水平垂直居中

有了上面的基础，水平垂直居中其实就是上面的组合，下面举几个常用的组合：

1).flex实现垂直居中

.parent{
    display: flex;
    align-items: center;/*让项目在侧轴方向居中*/
    justify-content: center;/*让项目在主轴方向居中*/
}

可以适用任意情况，唯一的不足是兼容性不佳。

2).利用绝对定位的特性：宽高由内容撑开

.parent{
    position: relative;
}
.son{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

3).文本/行内元素/行内块级元素专属

.parent{
    height: 200px;
    text-align: center;
    line-height: 200px;
}

当然还有其他的组合形式，大家可以自由发挥试一试，在实际使用时要考虑到咋样对整体布局影响最小，咋样最方便，祝大家都开心顺利哈哈。