为什么HTML中的<center>标签被弃用了？

Question

我很好奇为什么HTML中的<center>标签被弃用了。

<center>是一种快速居中对齐文本和图像块的简单方式，只需将容器封装在<center>标签中即可。但现在我无法找到更简单的方法来实现这个功能。

有没有人知道如何以简单的方式居中对齐“东西”（不是使用margin-left:auto; margin-right:auto;和width属性），有什么替代<center>标签的方法？还有，它为什么被弃用了？

- Andreas Grech

Answer 1

<center> 元素已经被弃用，因为它只定义内容的 呈现方式，而不是其描述。

居中的一个方法是将元素的 margin-left 和 margin-right 属性设置为 auto，然后将父元素的 text-align 属性设置为 center。这可以确保该元素在所有现代浏览器中都居中显示。

- Jordan Ryan Moore

---

是的，CSS主要是将表现和数据分离。 - Ivan Nevostruev

Ivan，CSS 的关键在于呈现，而不是像一些答案中展示的内联样式属性那样进行分割！当然，使用明智的类而不是内联 CSS 是一个非常好的想法，但这与使用 CSS 进行展示有着明显的区别。 - Peter Boughton

我曾经遇到过一些情况（目前我无法回忆起来），在这些情况下设置 margin 和 text-align 并不能将我的元素居中于 IE 浏览器，但使用 <center> 对其进行包裹却可以…我会尝试找个例子。 - Mottie

自动外边距技巧只对块级元素有效。在内联元素上使用 display: block;。 - Steve Graham

我相信典型的WP或Drupal模板中有十七个嵌套的div能够很好地分离出演示细节 :P </troll>（<-瞧，语义标签！） - detly

Answer 2

最不受欢迎的答案

1. 一个被弃用的标签不一定是一个坏标签;
2. 有一些处理表现逻辑的标签，如center;
3. center标签与带有text-align:center的div不同;
4. 你有另一种方法去做某事并不意味着它是无效的。

让我解释一下，因为这里有臭名昭著的投票者会认为我在捍卫老派的HTML4之类。不，我不是。但围绕center的争论只是一场趋势战争，没有真正的理由放弃这个能够很好地服务于有效目的的标签。

那么让我们看看它的主要反对观点。

• "它描述的是呈现方式，而不是语义！"
  不是的。它描述的是一种逻辑排列方式 - 是的，它有一个默认的外观，就像其他标签（如<p>或<ul>）一样。但重点是封闭部分与其周围环境的关系。Center标签表示“这是我们通过视觉上不同的定位来分隔的内容”。

• "它不是有效的"
  是的，它是有效的。只是已被弃用，也就是说，可能会在以后被删除。现在已经过去15年了。但它似乎并没有消失。一些主要网站（包括google.com）使用此标签，因为它非常易读和简洁明了 - 这也是我们喜欢HTML5标签的原因。

• "HTML5不支持它"
  实际上，它是最广泛支持的标签之一。MDN表示“由于它可能随时被删除，因此不建议使用” - 这是一个好观点，但是引用一个经典的话，“那一天可能永远不会到来”。Center标签早在2004年左右就已经被弃用了 - 它仍然存在并且仍然有用。

• "它是老派的"
  鞋带也是老派的。新方法并不会使旧方法失效。你想感觉到进步和现代化：没问题。但不要把它变成法律。

• "它很愚蠢/尴尬/糟糕/让人看起来很傻"
  没有这些。它就像一把锤子：一种特定工作的工具。虽然还有其他工具可以完成同样的工作，也有其他工作可以使用同一个工具；但它被创建出来是为了解决某个特定的问题，而这个问题仍然存在，所以我们最好使用专门的解决方案。

• "你不应该这样做，因为有CSS"
  居中可以通过CSS完全实现，但那只是一种方式，而不是唯一的方式，更不是唯一的适当的方式。任何支持、可行和易读的方法都应该是可以使用的。此外，相同的争论发生在flexbox和CSS网格之前，这很有趣，因为当时没有CSS方法可以实现center所做的事情。不，text-align:center并不相同。不，margin:auto也不相同。在flexbox之前反对center标签的人只是不了解CSS。

简而言之：

不使用<center>的唯一原因是因为人们会讨厌你。

- dkellner

---

我看过这个问题中最好的答案。为了记录，我将继续使用<center>标签。 - Marco Concas

2021年，我很惊讶地发现谷歌仍在其首页上使用它。 - Mark Fisher

你的IDE也会讨厌你...但这不会阻止我！ - David Callanan

嗯，我没提到电子邮件。顺便说一句，这绝对是个更复杂的问题，所以我们不要回到制作网页像我们今天制作电子邮件那样的日子。 - dkellner

这不仅仅是对这个问题的最佳回答，它也是在Stack Exchange上写下的最好的答案之一。 - Dave

Answer 3

有时候我仍然会使用 <center> 标签，因为在 CSS 中没有任何东西可以像它一样有效。以下是尝试使用 <div> 技巧但失败的示例：

<div style="text-align: center;">This div is centered, but it's a simple example.</div>
<br />
<div style="text-align: center;"><table border="1"><tr><td>&lt;div style="text-align: center;"&gt; didn't center correctly.</td></tr></table></div>
<br />
<div style="text-align: center;margin-left:auto;margin-right:auto"><table border="1"><tr><td>&lt;div style="text-align: center;margin-left:auto;margin-right:auto"&gt; still didn't center either</td></tr></table></div>
<br />
<center><table border="1"><tr><td>Actually Centered with &lt;center&gt; tag</td></tr></table></center>

标签可以实现居中效果。但是如果要使用 CSS，有时需要在多个位置添加 CSS 并进行调整才能正确地实现居中效果。回答你的问题，CSS 已经成为一种宗教，信徒和追随者们视 <center> <b> <i> <u> 为亵渎、不祥之物，认为它们过于简单，无法保证他们的工作安全。 如果他们试图让你放弃使用 <table> 标签，请问他们 CSS 中 colspan 或 rowspan 属性的等价物是什么。

重要的不是抽象或书本上的真理，而是实践中的真理。
-- 禅宗

- Russell Hankins

---

你也可以使用 display:flex; justify-content:center; text-align:center。 - Justin Liu

请注意，在第三个示例中，您在包装器<div>中设置了“margin-left:auto; margin-right:auto”，但是这些样式应该在要居中的元素（即<table>）中设置。确实，通过这种更改，第三个示例可以正确地将表格居中。尽管如此，这种脆弱性/复杂性说明了CSS居中的方式不如传统的<center>标签易用。 - waldyrious

Answer 4

根据W3Schools.com，

中心元素在HTML 4.01中已被弃用，在XHTML 1.0 Strict DTD中也不受支持。

HTML 4.01规范给出了废弃标签的原因：

CENTER元素与将DIV元素的align属性设置为“center”完全等效。

- Conrad Meyer

---

我非常希望这是真的。 - badp

这实际上是真的，但 DIV 标签的 align 属性也已经过时了 :D - Oleh Prypin

请注意，w3schools并不是W3C。 - showdev

“CENTER”元素与将“DIV”元素的align属性设置为“center”完全相同，只不过通过标记可以清楚地看出它是居中对齐的。如果这是一个有效的理由，那么我们可以废除<strong>，<b>，所有的<h>和其他标签，并说它们与带有一些CSS的<span>做同样的事情。此外，XHTML甚至不能识别HTML5标签，比如canvas。它之所以被弃用，仅仅是因为对抗跑马灯、居中对齐、表格、框架等元素的战争是纯粹的信仰，因为它们都有自己的用途。” - Dmytro

@Dmitry <strong>和<h>标签具有超出视觉样式的语义含义。我猜如果<center>标签仍然存在，你可以使用CSS对其进行样式设置，例如使其内容左对齐。 - Nick Rice

Answer 5

我所做的是将常见的任务如居中或浮动并将其制作为CSS类。当我这样做时，我可以在任何页面上使用它们。我还可以在同一个元素上调用尽可能多的类。

.text_center {text-align: center;}
.center {margin: auto 0px;}
.float_left {float: left;}

现在我可以在HTML代码中使用它们来执行简单的任务。

<p class="text_center">Some Text</p>

- Scott Radcliff

---

这与<center>不同！（如果有人想更改center，那不合适） - mkours

Answer 6

如果您愿意，仍然可以将此与XHTML 1.0 Transitional和 HTML 4.01 Transitional一起使用。在我看来，唯一的其他方式（也是最佳方式）是使用边距：

<div style="width:200px;margin:auto;">
  <p>Hello World</p>
</div>

你的HTML应该定义元素，而不是控制其展示。

- Sampson

Answer 7

HTML的目的是用于结构化数据，而不是控制布局。CSS旨在控制布局。你还会发现，许多设计师不赞成使用<table>来进行布局，正是出于这个原因。

- jkndrkn

---

我希望HTML仅用于结构化数据...但事实并非如此。在添加CSS之前，你有多少次不得不修改HTML？（对我来说总是这样）。现在，我们使用像React这样的工具将数据（和逻辑）与布局/样式分离，许多人现在使用JSX进行布局/样式设计（例如自定义“中心”组件）。我们已经走了一圈。 - David Callanan

Answer 8

HTML标记语言的意图是表示内容的含义和结构，而不是外观。在早期版本的HTML中，这一点被混淆了。但标准化组织正在努力整理。

让标签控制外观的一个问题是，你的页面无法与残障设备（如屏幕阅读器）良好地配合使用。它还会导致在文本中有很多标签，这些标签并没有帮助澄清含义，而是用另一种级别的信息使其变得混乱。

因此，CSS被设计出来将格式化/显示移动到不同的语言中，这与文本是分开的，并且可以轻松地保持这种状态。除其他外，这允许切换样式表以更改Web页面的外观，而不影响其他标记。并且能够同时为许多页面执行此操作。

CSS提供的工具不总是优雅的，我在你这边。例如，没有一种方法可以有效地垂直居中。如果不仅仅是适用于text-align的文本，水平居中也不会好到哪里去。

你可以选择做容易、有效但混乱的事情或者做干净、优雅但繁琐的事情。我不明白为什么Web开发人员要容忍这种混乱，但我想他们很高兴至少有机会完成他们的工作。

- Carl Smotricz

---

作为一个非Web开发人员，我认识到使用CSS指定某些演示属性可能会很麻烦。我仍然觉得最好使用CSS而不是混淆结构标记，但是...什么鬼？谁负责定义CSS规范，他们在某个偏远丛林中找到的随机猴子吗？说真的。 - Dan Moulding

请不要侮辱偏远丛林中的随机猴子！ - DaveWalley

Answer 9

对于文本和图片，您可以使用text-align属性：

<div style="text-align: center;">
    I'm centered.
</div>

- Tomas Markauskas

---

这些被称为内联元素。 - Christoph Bühler

你的解决方案对于<form...>无效。 - Petrus

Answer 10

您可以将以下代码添加到您的CSS中，然后使用 <div class="center"></div>。

.center{
  text-align: center;
  margin: auto;
  justify-content: center;
  display: flex;
}

或者，如果你想保留 <center></center> 并且在它被移除的情况下做好准备，请将以下内容添加到你的 CSS 中。

center{
  text-align: center;
  margin: auto;
  justify-content: center;
  display: flex;
}

- SwiftNinjaPro

---

就这样。通过这几行修复，您的代码将具备未来兼容性。 - dkellner

（注意，display:flex会产生副作用。但我们明白了重点。） - dkellner