特别声明：此篇文章内容来源于@CHRIS COYIER 的Centering in CSS:A Complete Guide
子曰：CSS 居中是一个非常常见的问题，无论是在项目中，还是在各种面试资料中，这篇文章进行了系统的解答
本文为个人翻译
我们总是抱怨使用CSS居中。 为什么要这么辛苦？ 这个问题不是说很难去解决，而是由于不同的情况有很多不同的方式来实现，我们难以抉择去选择那一个方式去解决它。
所以我们希望通过决策树来更处理它。
我需要居中...
- 水平居中
- inline 或inline-* 元素（像text 或link）
- block level 元素
- 多个block level 元素
- 垂直居中
- inline 或inline-* 元素（像text 或link）
1. 单行
2. 多行 - block level 元素
1. 元素的高度已知
2. 元素的高度未知
3. 使用flexbox - 水平垂直居中
- 固定宽高元素
- 未知宽高的元素
- 使用flex
- 使用grid
水平居中
inline 或inline-* 元素（像text 或link）
可以在块级别的父元素中水平居中inline 元素，只需：
.center-children {
text-align: center;
}
inline、inline-block、inline-table、inline-flex 都可以居中。
block level 元素
设置块级元素的margin-left和margin-right 为auto进行居中（并且它有一个已知的width 值，否则它将是全宽展示，不需要居中）。 通常使用下面的缩写来完成的：
.center-me {
margin: 0 auto;
}
不管需要居中的块级元素的宽度或父级的宽度如何，上述代码都可以。
主要，你不能使用float进行元素居中。 虽然这有一个技巧。
多个block level 元素
如果需要将两个或多个的块级元素在 一行中 水平居中，那么你可能最好设置一个不同的display类型。 下面是使它们成为内联块的示例以及使用flexbox的示例：
<main class="inline-block-center">
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
<main class="flex-center">
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
margin: 20px 0;
padding: 10px;
}
main div {
background: black;
color: white;
padding: 15px;
max- 125px;
margin: 5px;
}
.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;
}
.flex-center {
display: flex;
justify-content: center;
}
除非你的意思是你有多个块级元素堆叠在一起，在这种情况下，仍然可以通过设置margin 来居中：
<main>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
margin: 20px 0;
padding: 10px;
}
main div {
background: black;
margin: 0 auto;
color: white;
padding: 15px;
margin: 5px auto;
}
main div:nth-child(1) {
200px;
}
main div:nth-child(2) {
400px;
}
main div:nth-child(3) {
125px;
}
垂直居中
CSS 中垂直居中是一个棘手的问题。
inline 或inline-* 元素（像text 或link）
单行
有时inline / text 元素可以出现垂直居中，只是因为paddig-top 等于padding-bottom。
.link {
padding-top: 30px;
padding-bottom: 30px;
}
如果出于某种原因，padding不是一个选项，并且你尝试将一些已知不会换行的文本（单行）居中，则有一个技巧是使height等于line-height将使文本居中。
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
多行
paddig-top 等于padding-bottom也可以为多行文本赋予居中效果，但如果这样做不起作用，那么文本所在的元素可能是table cell，无论是字面上的还是与行为类似的CSS。 在这种情况下，vertical-align属性处理这个问题，与通常所处理的不同，它处理排在一行上的元素的对齐方式。 （更多内容。）
<table>
<tr>
<td>
I'm vertically centered multiple lines of text in a real table cell.
</td>
</tr>
</table>
<div class="center-table">
<p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>
body {
background: #f06d06;
font-size: 80%;
}
table {
background: white;
240px;
border-collapse: separate;
margin: 20px;
height: 250px;
}
table td {
background: black;
color: white;
padding: 20px;
border: 10px solid white;
/* default is vertical-align: middle; */
}
.center-table {
display: table;
height: 250px;
background: white;
240px;
margin: 20px;
}
.center-table p {
display: table-cell;
margin: 0;
background: black;
color: white;
padding: 20px;
border: 10px solid white;
vertical-align: middle;
}
如果tabel-like 布局过时了，也许你可以使用flexbox？ 一个单独的flex-child 可以很容易地在flex-parent 中居中。
.flex-center-vertically {
display: flex;
justify-content: cnter;
flex-direction: column;
height: 400px;
}
<div class="flex-center">
<p>I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>
body {
background: #f06d06;
font-size: 80%;
}
div {
background: white;
240px;
margin: 20px;
}
.flex-center {
background: black;
color: white;
border: 10px solid white;
display: flex;
flex-direction: column;
justify-content: center;
height: 200px;
resize: vertical;
overflow: auto;
}
.flex-center p {
margin: 0;
padding: 20px;
}
记住，只有父容器具有固定高度（px，%等），那么它才真正相关，这就是为什么这里的容器有一个高度。
如果这两种技术都过时了，你可以使用“鬼元素（ghost element）”技术，在这种技术中，一个全高度的伪元素被放置在容器中，并且文本与其垂直对齐。
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
}
<div class="ghost-center">
<p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
</div>
body {
background: #f06d06;
font-size: 80%;
}
div {
background: white;
240px;
height: 200px;
margin: 20px;
color: white;
resize: vertical;
overflow: auto;
padding: 20px;
}
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
190px;
margin: 0;
padding: 20px;
background: black;
}
block level 元素
元素的高度已知
不知道网页布局的高度是很常见的，原因很多：如果宽度改变，文本重排可以改变高度。 文字造型的差异可以改变高度。 文字数量的变化可以改变高度。 具有固定宽高比的元素（如图像）可在更改大小时更改高度, 等等。
但是如果你知道高度，你可以像这样垂直居中：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
<main>
<div>
I'm a block-level element with a fixed height, centered vertically within my parent.
</div>
</main>
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
height: 300px;
margin: 20px;
300px;
position: relative;
resize: vertical;
overflow: auto;
}
main div {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
height: 100px;
margin-top: -70px;
background: black;
color: white;
padding: 20px;
}
元素的高度未知
将top 设置为50% 之后，可以通过将它的高度调高一半来使它居中：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%)
}
使用flexbox
没有什么大惊喜，这在flexbox中更容易。
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
水平垂直居中
你可以以任何方式将上述技巧结合起来，以获得完美居中的元素。 但我发现这通常分为三个阵营：
固定宽高元素
在将其绝对定位在50％/ 50％后，使用等于该宽度和高度的一半的负边距，获得完美的跨浏览器支持水平垂直居中：
.parent {
position: relative;
}
.child {
300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
未知宽高的元素
如果不知道宽度或高度，则可以使用transform属性，在两个方向上的50％负向平移（它基于元素的当前宽度/高度）居中：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<main>
<div>
I'm a block-level element of an unknown height and width, centered vertically within my parent.
</div>
</main>
body {
background: #f06d06;
font-size: 80%;
padding: 20px;
}
main {
position: relative;
background: white;
height: 200px;
60%;
margin: 0 auto;
padding: 20px;
resize: both;
overflow: auto;
}
main div {
background: black;
color: white;
50%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
resize: both;
overflow: auto;
}
使用flexbox
使用flexbox 实现水平垂直居中，需要使用两个居中属性：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
<main>
<div>
I'm a block-level-ish element of an unknown width and height, centered vertically within my parent.
</div>
</main>
body {
background: #f06d06;
font-size: 80%;
padding: 20px;
}
main {
background: white;
height: 200px;
60%;
margin: 0 auto;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
resize: both;
overflow: auto;
}
main div {
background: black;
color: white;
50%;
padding: 20px;
resize: both;
overflow: auto;
}
使用grid
这只是一个小技巧（由Lance Janssen 提出），对于一个元素来说效果非常好：
body, html {
height: 100%;
display: grid;
}
span { /* thing to center */
marign: auto;
}
总结
在CSS 中你可以居中任何事