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

前言：

在我们的平常项目里，页面布局中经常要把一些字，图，div等等居中，贴近用户的审美，我们自然也用到了很多种方法去实现，接下来我想做个系统的总结，帮助自己加深记忆，也希望能帮助到你们。

首先给出下列所有例子共有的html结构：外部div:parent+son,son是什么元素看下面具体分析

接下来进入正题

一、元素水平居中

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

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

.parent{
    text-align: center;
}

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

2.son是块级元素

.son{
    margin: 0 auto;
}

3.son是任意元素

a).flex布局

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

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

b).transform+absolute

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

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

c).利用绝对定位元素的特性:宽度由内容撑开

left + right + width + padding + margin =包含块padding区域的

.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是任意元素

a).transform+absolute

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

　　跟水平垂直类似，只改变了方向

b).利用绝对定位元素的特性:高度由内容撑开

top + bottom + height + padding + margin =包含块padding区域的高度

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

局限性同样也是需要知道元素的高度才能计算出

c).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;
}

　　当然还有其他的组合形式，大家可以自由发挥试一试