在 CSS 中使用 `text-align:center` 和 `margin: 0 auto` 使元素居中有什么区别？答案

【问题标题】：What is the difference between using `text-align:center` and `margin: 0 auto` to center an element in CSS?在 CSS 中使用 `text-align:center` 和 `margin: 0 auto` 使元素居中有什么区别？
【发布时间】：2011-01-24 10:54:39
【问题描述】：

我已经在很多地方阅读过使用 margin:0 auto 将元素（例如 div）居中的内容。
但为什么不使用align:center？我认为使用后者似乎更自然。

另外，我们也可以使用margin 方法来设置垂直对齐吗？

【问题讨论】：

大写很重要。 :) 如果您花时间正确写出问题，人们会更认真地对待您的问题。

标签： css

【解决方案1】：

text-align: center 将使容器的内容居中，而margin: auto 将使容器本身居中。

您应该小心margin:auto，因为它在 IE6 中不受支持。在IE6中，你应该在外部容器上设置text-align:center，并将容器本身的CSS重置为text-align:left。

【讨论】：

事实并非如此：当您有一个将其置于标准兼容模式（与“怪癖”模式相反）的 DOCTYPE 时，IE6 支持“margin: auto”。
举个例子会更好。

【解决方案2】：

首先，没有“对齐：居中”。你想到的是“text-align: center”，而那个细节——前缀“text-”——是关于问题所在的提示。 “text-align”属性用于块中的内联元素。当您尝试在某些内容中使块级元素居中时，内联布局样式没有意义。

元素上的（现在弃用） align 属性不是 CSS 的东西；这是对昔日时光的回归。

现在，关于垂直对齐，遗憾的是答案是“不”，至少实际上是这样。 “margin: auto”的技巧是行不通的。委婉地说，只有 CSS 的垂直对齐是具有挑战性的。有许多不同的情况和技术可供使用。这是一个关于这个主题的有趣（如果有点旧）页面：http://www.student.oulu.fi/~laurirai/www/css/middle/

从未来编辑 — 任何尝试垂直居中的人都应该关注flexbox layout 的可用性。

【讨论】：

在 2015 年 flexbox 布局尚未获得关注（尽管大多数浏览器似乎在某种程度上支持它），但可以使用 css 表格实现垂直对齐。基本上与现在回避的表格布局相同，除了 table、tr 和 td 之外，您将 div 的显示设置为 table 和 table-cell（实际上您只需要这两个元素）。我怀疑当 HTML 应用程序变得流行并且越来越多的人在他们的移动设备（手机、平板电脑等）上拥有兼容 flexbox 的浏览器时，flexbox 将会获得更多的关注。 Flexbox 布局可以在那里产生很大的不同。
“只有 CSS 的垂直对齐是具有挑战性的”绝对不是这样，你不知道你在说什么
公平点。现在肯定有很多方法可以做到，但即使在那时也没有挑战性......

【解决方案3】：

text-align=center 用于将内容（例如文本）居中对齐，而margin: auto 用于将元素本身居中对齐。

然而，在旧版浏览器 (IE) 中，您可以使用 text-align:center 将元素对齐到中心。

但我怀疑你的意思是align=center，如下例所示：

<p align="center">
 .......
</p>

<h1 align="center">
 .......
</h1>

但是，并非所有元素都有align="center"，您必须使用margin:0 auto 来对齐它们。

那么，

如果你想对齐元素的内容，你应该这样做：

<p style="text-align:center">
 .......
</p>

如果你想对齐元素本身，你应该这样做：

<div style="margin:0 auto;">
 .......
</div>

<p style="margin:0 auto;">
 .......
</p>

【讨论】：