CSS居中技巧-优快云博客

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

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

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

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

.inner {
    text-align: center;
}
复制代码

.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%);
}
复制代码

.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%);
}
复制代码

.inner {
    text-align: center;
    line-height: 60px;
}
复制代码

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

.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)
}
复制代码

css居中问题汇总