使用CSS居中内容的4种方法

Flexbox

使用flexbox来垂直和水平居中内容通常是首选方法。只需在容器元素中添加三行代码，设置display: flex，然后使用align-items: center和justify-content: center分别垂直和水平居中子元素。您可以查看Flexbox居中代码片段以获取代码和示例。

Grid

使用网格模块与flexbox非常相似，也是一种常见的技术，特别是如果您已经在布局中使用了网格。与前一种技术的唯一区别是将display设置为grid。您可以查看网格居中代码片段以获取代码和示例。

Transform

Transform居中使用CSS变换来居中元素，正如其名称所示。它依赖于容器元素具有position: relative，允许子元素利用position: absolute来定位自身。然后使用left: 50%和top: 50%来偏移子元素，使用transform: translate(-50%, -50%)来抵消其位置。您可以查看Transform居中代码片段以获取代码和示例。

Table

最后，表格居中是一种较旧的技术，您可能在处理旧浏览器时更喜欢使用它。它依赖于在容器元素中使用display: table。这允许子元素使用display: table-cell结合text-align: center和vertical-align: middle来水平和垂直居中。您可以查看显示表格居中代码片段以获取代码和示例。