多个你不知道的 CSS 居中方案水平居中内联元素要使内联元素（如链接

水平居中内联元素要使内联元素（如链接， span 或img）居中，使用 text-align: center 足够了。
.desk {text-align: center;}
文章插图
对于多个内联元素，也可以使用text-align：center:
.desk {text-align: center;}
文章插图
Flexbox使用 flexbox 也可以快速居中元素：
.desk {display: flex;justify-content: center;}对于多个内联的项目，也可以正常工作：
文章插图
CSS Grid使用网格容器时，图中的盘子将根据其网格区域居中。请注意，除非将它们包裹在一个元素中，否则这将不适用于多个盘子。
.desk {display: grid;justify-content: center;}
文章插图
块元素Auto Margin宽度和高度已知的块元素可以通过设置margin-left:auto 和 margin-right:auto 居中元素。
.plate {width: 120px;height: 120px;margin-left: auto;margin-right: auto;}
文章插图
对于多个块元素，它们应该包装在一个元素中，然后让这个父元素居中。
.tray {display: flex;margin-left: auto;margin-right: auto;}
文章插图
Flexbox对于 flexbox 同样也是使用 justify-content:center 来居中元素：
.desk {display: flex;justify-content: center;}
文章插图
对于多个元素，我们不需要将它们包裹在一个元素中， flexbox 可以将它们都居中。
CSS定位通过绝对定位，我们可以轻松地通过CSS transform将其水平居中。
【多个你不知道的 CSS 居中方案】.plate {position: absolute;left: 50%;transform: translateX(-50%);}
文章插图
在已知元素宽度的情况下，可以使用负边距代替CSS transform 。
.plate {position: absolute;left: 50%;margin-left: -60px;}垂直居中内联元素Vertical Padding
垂直居中元素最简单的方法之一是使用padding:
padding-top: 24px;padding-bottom: 24px;}
文章插图
Vertical Alignvertical-align属性可用于一个或多个元素。
在此示例中，叉子和刀子应与桌子垂直居中。
.desk {text-align: center;}.plate,.fork,.knife {vertical-align: middle;}Flexbox为了对齐盘子，叉子和刀，我们可以使用 flexbox:
.desk {display: flex;justify-content: center;align-items: center;}
文章插图