css居中问题汇总

最近正在找工作，遇到了好多次问css居中的问题，趁着今天下雨，集中总结一下这个问题的答案，也正式开始我的博客之旅。

言归正传，正式开始。css居中的元素分为行内元素和块级元素，居中的种类又分为水平居中，垂直居中以及垂直水平居中。本文会针对三种居中情况对行内元素和块级元素分别进行分析，力争做到全面、细致。

1. 水平居中

不管是对于行内元素还是对于块级元素而言，水平居中都是最简单的。 我们选用一个最简单的嵌套div结构进行演示：

1. 行内元素的水平居中 对于行内元素或者类行内元素而言，包括display值为：inline, inline-block, inline-grid, inline-table, inline-flex这些情况，只需要在父元素设置text-align: center即可。

.inner {
    text-align: center;
}

2. 块级元素的水平居中 块级元素的水平居中最常使用的就是将margin-left和margin-right都设置成auto。

.inner {
    margin: 0 auto;
}

另一种常见的块级元素水平居中方式是给父级元素设置display: flex; justify-content: center;

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

除此之外，还可以利用绝对定位实现块级元素的水平居中，分为居中模块宽高已知和未知两种情况。首先将父级元素的设为position: relative;

.container {
    position: relative;
}

对于已知居中模块宽高的情况，只需要先偏移父级宽高的一半，然后再用负边距偏移居中模块的一半宽度即可。

.inner {
    position: absolute;
    left: 50%;
    margin-left: -50px; //居中模块宽度的一半
}

对于居中模块宽高未知的情况则要用到transform: translateX()，原理还是一样，偏离居中模块宽度的一半。

.inner {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

2. 垂直居中

1. 行内元素的垂直居中 对于文本文件而言，将line-height设置成高度即可。需要注意的是，设置line-height只对文本元素有效。

   

.inner {
    text-align: center;
    line-height: 60px;
}

对于设置 2. 块级元素的垂直居中 常用的块级元素的垂直居中跟水平居中的情况类似，有两种方法：弹性盒子布局以及绝对定位，绝对定位又分为居中模块宽高已知和未知两种情况。话不多说，直接上代码。 弹性盒子布局：

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

对于绝对定位呢，只需要把水平偏移改为垂直偏移即可。还是先将父级容器设为position: relative;

.container {
    position: relative;
}

居中模块宽高已知的情况：

.inner {
    position: absolute;
    top: 50%;
    margin-top: -30px; //居中模块高度的一半
}

居中模块宽高未知的情况：

.inner {
    position: absolute;
    top: 50%;
    transfrom: translateY(-50%);
}

3. 垂直水平居中

1. 行内元素的垂直水平居中 对于文本元素的垂直水平居中，在介绍文本元素的垂直居中时候就已经实现，这里不再赘述。

.inner {
    text-align: center;
    line-height: 60px;
}

2. 块级元素的垂直水平居中

块级元素的垂直水平居中，将水平居中和垂直居中组合起来就可以了。直接上代码： 弹性盒子布局

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

绝对定位

.container {
    position: relative;
}

已知居中模块宽高的情况

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -30px;
}

居中模块宽高未知的情况

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0)
}