正中靶心！用 CSS 让 div 元素居中的 4 种方法

好的、可靠的方法

经典对齐

X/Y轴对齐

行高 hack-align 方法

结论

照片由 Immo Wegmann 在 Unsplash 上拍摄

如果说CSS中有什么曾经让人觉得难以理解（甚至对初学者来说难如登天）的事情，那就是同时实现水平和垂直居中对齐。这个看似简单的视觉细节，却常常让老派的网页开发者们感到无比沮丧。

幸好 Flexbox 的出现改变了这一切，但尽管它是我常用的居中方式，我认为我们仍然可以从其他方法中学习很多东西。因此，我们将探讨 Flexbox 以及其他一些解决这种常见 UI 问题的方法。

哦，我们这里说的不是 CSS Grid，因为这是一个非常复杂、资源丰富的属性，具有无穷无尽的对齐方式，需要一整篇文章才能介绍清楚。

好了，我们开始吧：

好的、可靠的方法

Flexbox 的一个优点是它给人的感觉是一个非常完善的标准。没错，它可能会有点复杂，但如果你花时间真正理解它的工作原理，它就能让你创建出非常优雅且灵活的布局。

也就是说，下面介绍如何使用 Flexbox 将元素居中。

没有缺点，没有花哨的功能，只是一个非常好的 CSS 属性，而且用法也完全符合预期。它非常好用，你甚至不需要给子元素添加属性，但如果你真的想添加，你可以像这样使用 `<style>`.child { align-self: center; }而不是`<style> .parent { align-items: center; }`。

经典对齐

如果说Web开发领域有什么经典之作，那就是古老的<table>元素了。

除了主要用于创建表格之外，它<table>过去常被用于 Photoshop 制作的切片网站，如今在电子邮件模板中依然大放异彩。然而，在过去，利用其布局属性将元素居中对齐是一种虽然有点取巧但可靠的方法。

以下是以前的做法——而且你可能仍然想在电子邮件模板中采用这种做法，因为说实话，Gmail 短期内不会完全支持 Flexbox……

还不错吧？虽然读起来和理解起来都很轻松，但仅仅为了这个目的display: table而重新利用，难免有些苦涩display:table-cell，不过，只要有效就行。

X/Y轴对齐

这种方法运用了一些绝对定位和变换属性。它不如 Flexbox 方法那样纯粹，但对于需要子元素自然重叠的情况非常有用。

我们来看一个例子：

这种方法的主要区别在于，由于子元素是绝对的，所以任何新添加的子元素都会占据父元素内部的完全相同的空间。通过更改这些transform值或进行其他操作，opacity可能会非常有用。

行高 hack-align 方法

目前为止，这个方法感觉最像个临时方案，但如果父元素的高度不变，并且子元素是像 `<div>` 或文本节点这样的行内元素，它就能很好地工作<span>……<a>你知道吗，你可能最好还是用其他任何一种解决方案，但无论如何，它的工作原理如下：

我的意思是，如果父元素的高度发生变化，你也需要改变子元素的行高，这虽然不是最佳方案，但总比逐像素地增加子元素的垂直内边距要好……

结论

巧妙运用 CSS 可以起到很大的作用。

针对同一问题提出的这四种不同解决方案可以满足多种使用场景，希望能帮助您实现出色的用户界面。

嘿，我们联系吧👋

请在Twitter上关注我，并告诉我你是否喜欢这篇文章！

如果你真的很喜欢，记得分享给你的朋友们，这对我的帮助非常大哦😄