十个CSS实现元素居中的方法汇总

在前端开发工程师的日常生活中，使用 CSS 使元素居中是很常见的，这也是面试中经常被问到的问题。

也许你已经使用 flex 或 absolute transform 来实现它，但你知道至少有 10 种方法可以做到元素居中吗？因此，在今天的文章中，我为大家整理了10个关于实现元素居中的CSS技巧，希望可以帮助你提升CSS技术。

1、absolute (-margin)

如果元素的宽度和高度已知，我们可以使用至少 3 种方法来使元素居中。例如，在下图中，小猫的宽度和高度分别为“500px”和“366px”。我们应该如何居中？

用 ‘absolute (-margin) ` 很容易完成！代码如下：

HTML