后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何在 CSS 中将任何内容居中
CSS 中充满了各种细微的差别，对于初学者来说可能相当令人困惑。在过去的 20 年里，开发人员不得不想出许多方法来构建布局，随着语言的发展，我们也找到了越来越好的解决方案。
我最近发了一条推文，将其中几种解决方案混合成一个无法使用的损坏类，所以现在我将以一种更有帮助的方式解释要使用的真正模式
文本对齐方法
要将所有文本置于容器内的中心，可以使用 css 规则text-align: center;
这将适用于所有内联元素 - 即任何像文本一样流动的元素
<div style="text-align: center">
This will center all inline elements
<br />
<span>
Spans are inline elements by default
</span>
<br />
<div style="display: inline-block;">
Inline blocks are also affected
</div>
</div>
示例如下：https://codepen.io/jacobparis/pen/BaNEbVQ
行高方法
要使文本垂直居中，您可以使用此vertical-align: middle;规则。需要注意的是，这只会使字符在其行高内对齐。例如，您可以使用此规则将文本设置为上标或下标定位，但文本的流向仍然相同。
如果您想通过这种方式将文本垂直置于容器内，则需要确保该line-height属性具有与容器相同的高度。
<div style="height: 200px; text-align: center;">
<span style="vertical-align: middle; line-height: 200px;">
This will center all inline elements
</span>
<div style="display: inline-block;">
Inline blocks are also affected
</div>
</div>
示例如下：https://codepen.io/jacobparis/pen/RwPOdza
背景定位方法
这仅适用于要设置为其他元素背景的图像（以及 SVG！）。对于<img />标签，您可以使用任何适用于 div 的方法。
这里的规则是background-position: center;
<div style="
height: 300px;
background-image: url('http://placekitten.com/200/200');
background-repeat: no-repeat;
background-position: center;
"/>
示例如下：https://codepen.io/jacobparis/pen/rNVbgBO
边距自动方法
块元素默认具有最大宽度，因此水平居中没有任何意义，除非您明确设置其宽度。
人为缩小的 div 默认位于左侧（在 RTL 场景中位于右侧），但你可以强制其居中margin-left: auto; margin-right: auto;
相同边距的常见简写是，margin: 0 auto;因为我们不关心垂直边距，所以没有什么可以阻止我们margin: auto;这样做
<div>
<div style="max-width: 300px; margin: 0 auto;">
This is a centered div
</div>
</div>
示例如下：https://codepen.io/jacobparis/pen/RwPOOwR
绝对位置法
在所有方法中，这是最极端的。我们不再让浏览器计算元素应该在的位置，而是明确地设置它。
这里重要的是，如果你想让某个东西在容器内居中，容器必须有position: relative;。这告诉绝对位置以什么为基础来确定其坐标。
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
本质上，你把元素的边缘锚定到其容器的边缘，使其大小完全相同。如果你随后明确设置宽度或高度，并使用 Margin Auto 方法，它最终会悬浮在边缘之间。
如果你只想要水平或垂直居中，你可以省略另一个轴
<div style="height: 500px; position: relative;">
<div style="
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100px;
height: 200px;
margin: auto;">
This is an absolutely positioned centered div
</div>
</div>
示例如下：https://codepen.io/jacobparis/pen/RwPOOwR
绝对偏移法
上一种方法的问题在于你需要明确设置宽度和高度。但如果内容动态变化怎么办？我们还有另一种解决方案！
无需设置所有四个角，只需设置left: 50%;和top: 50%;。这会将元素的左上角定位在其容器的中心。
然后，您可以使用 CSS Translate 将子项向上和向左移动其自身宽度和高度的一半，完美地落在中心
<div style="height: 200px; position: relative;">
<div style="
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);">
This is an absolutely positioned centered div with dynamic position
</div>
</div>
示例如下：https://codepen.io/jacobparis/pen/bGdJJJm
Flexbox 方法
Flexbox 是 CSS 史上最大的变革者，它让居中变得轻而易举。
理解 flex 的关键在于理解父元素负责布局其子元素。如果你试图让每个元素都自己定位，那你肯定会遇到麻烦。
由于 flex 父元素负责其子元素的位置，因此它们是内联元素还是块级元素都无关紧要。这已经没有区别了。与其考虑内联和块级元素，不如考虑 flex-parents 和 flex-children。
具有 flex-parent 的元素display: flex;仅控制直接子元素，而不控制进一步的后代。
<div style="
height: 300px;
display: flex;
justify-content: center;
align-items: center;
">
<div>
This is a flex-child
</div>
<span>
This is a flex-child
</span>
<div>
This is a flex-child
</div>
</div>
示例如下：https://codepen.io/jacobparis/pen/poJBBpq
网格法
CSS Grid 非常强大，但比我今天想讲的要高级得多。如果你只是想让项目居中，它的模式和 flexbox 非常相似——只需将其更改为display: grid;
如果这里有一个元素，它将完全居中（这也适用于 flexbox）
<div style="
height: 300px;
display: grid;
justify-content: center;
align-items: center;
">
<div>
This is a flex-child
</div>
<span>
This is a flex-child
</span>
<div>
This is a flex-child
</div>
</div>
示例如下：https://codepen.io/jacobparis/pen/poJBBpq
网格（放置物品）
我还想指出的一点是属性，它在 CSS Grid 上的作用就像、和的place-items: center;组合一样justify-contentalign-itemstext-align
display: grid;
place-items: center;