特别声明：此篇文章内容来源于@CHRIS COYIER 的Centering in CSS:A Complete Guide
子曰：CSS 居中是一个非常常见的问题，无论是在项目中，还是在各种面试资料中，这篇文章进行了系统的解答
本文为个人翻译
我们总是抱怨使用CSS居中。 为什么要这么辛苦？ 这个问题不是说很难去解决，而是由于不同的情况有很多不同的方式来实现，我们难以抉择去选择那一个方式去解决它。
所以我们希望通过决策树来更处理它。
我需要居中...
- 水平居中
- inline 或inline-* 元素（像text 或link）
- block level 元素
- 多个block level 元素
- 垂直居中
- inline 或inline-* 元素（像text 或link）
- 单行
- 多行
- block level 元素
- 元素的高度已知
- 元素的高度未知
- 使用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-width: 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) { ?width: 200px;}main div:nth-child(2) { ?width: 400px;}main div:nth-child(3) { ?width: 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; ?width: 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; ?width: 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; ?width: 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%; ?width: 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; ?width: 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%; ?width: 1%; ?vertical-align: middle;}.ghost-center p { ?display: inline-block; ?vertical-align: middle; ?width: 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; ?width: 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 { ?width: 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; ?width: 60%; ?margin: 0 auto; ?padding: 20px; ?resize: both; ?overflow: auto;}main div { ?background: black; ?color: white; ?width: 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; ?width: 60%; ?margin: 0 auto; ?padding: 20px; ?display: flex; ?justify-content: center; ?align-items: center; ?resize: both; ?overflow: auto;}main div { ?background: black; ?color: white; ?width: 50%; ?padding: 20px; ?resize: both; ?overflow: auto;}使用grid
这只是一个小技巧（由Lance Janssen 提出），对于一个元素来说效果非常好：
body, html { ?height: 100%; ?display: grid;}span { /* thing to center */ ?marign: auto;}总结
在CSS 中你可以居中任何事
一日一练-CSS-CSS 居中
原文地址：https://www.cnblogs.com/JobbyM/p/8808976.html