HTML5 用 CSS 替换块 div 的“中心”？答案

【问题标题】：HTML5 replacement for "center" for block divs with CSS?HTML5 用 CSS 替换块 div 的“中心”？
【发布时间】：2015-05-20 02:02:21
【问题描述】：

我正在尝试编写一个符合 HTML-5 的文档，该文档通过 W3C 验证器：http://validator.w3.org/check .
验证器抱怨每次使用

标签，并建议我应该使用 CSS。不幸的是，CSS 似乎无法使 BLOCK 居中水平。它可以使用'text-align：center'属性使文本居中，但将表格和图像居中的尝试失败。
我已在以下位置阅读“CSS 居中指南”： http://www.w3.org/Style/Examples/007/center.en.html 但它的所有示例也无法将表格或图像水平居中（至少在 Firefox 36.0 上）。谁能建议如何使这张桌子居中？：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>CSS centering bug demo
</title>
<style type="text/css">
  .centered{ display: block;
             margin-left:auto;
             margin-right:auto;
             align: center;
             text-align: center;
             vertical-align: center;
             horizontal-align: center;
           }  
</style>
</head>
<body>  
  <div class="centered">
    <table width="60%">
      <tr>
        <td>Example Table</td>
        <td>which should be horizontally centered on the page.</td>
      </tr>
    </table>
  </div>
</body>
</html>

【问题讨论】：

标签： css html

【解决方案1】：

如果您希望表格居中，请将 centered 类放入 table。

<table width="60%" class="centered">

您的 css 类中也有一些无效属性。你只需要像这样使用边距

.centered {
     margin-left:auto;
     margin-right:auto;
}

所以底线是把左右边距作为auto放到你想要居中的元素。

Js Fiddle Example

【讨论】：

感谢您的迅速且内容丰富的回复。您的方法适用于表格，但不适用于 <math>或 <svg>元素：
svg 是一个内联元素，所以在这种情况下，您还需要在其中添加display:block，然后您才能使用这种方法。
谢谢！但是为什么不能用<style>部分：数学：{显示：块；左边距：自动；边距右：自动；只有上述内容，数学元素不居中 - 我必须添加：<math class="centered" display="block"> ... </数学>使数学元素居中。
<style> 用于在html上定义css。此标签中的内容不会在页面上呈现。
是的，我知道 - 我正在尝试定义一个 <style>将导致 <math> 的元素和 <svg>要居中的元素，我可以将其指定为元素的“class=”属性，但这似乎不适用于 Firefox 的 CSS 实现。这是一个 Firefox 错误吗？

【解决方案2】：

要可靠地居中块元素，请执行以下所有：

指定左右边距和
——这是关键——
指定确定的宽度，例如，像素，不为百分比 (%)。

div.center {
    margin-right: auto ;
    margin-left: auto ;
    width: 800px ;
    }

在一行中指定边距，例如，margin: auto ;通常有效；但是，为了安全起见，请指定每个，即，margin-right: auto ; margin-left: auto ;。

我不知道这种技术是否符合规则，但我的经验是它确实可以可靠地工作。

当然，不能将width:指定为百分比很烦人！

【讨论】：

【解决方案3】：

以固定宽度居中块级元素：

margin-left: auto;
margin-right: auto;

div {
  width: 50%;
  margin: 0 auto;
  border: 1px solid #000;
}

&lt;div&gt;I am block-level with fixed with&lt;/div&gt;

居中内联子级：

text-align: center;

div {
  text-align: center;
  border: 1px solid #000;
}
span {
  display: inline-block;
  border: 1px solid #00f;
}

<div>
  <span>I am inline-level</span>
</div>

使宽度根据内容调整的块级包装器居中：

display: table;
margin-left: auto;
margin-right: auto;

div {
  display: table;
  margin: 0 auto;
  border: 1px solid #000;
}
p, span {
  border: 1px solid #00f;
}

<div>
  I am a block-level centered wrapper
  <p>I am block-level child</p>
  <span>I am inline-level child</span>
</div>

【讨论】：

【解决方案4】：

我认为 CSS 只是损坏/不正确。它并没有按照它在锡上所说的关于居中。我将继续使用

元素。

【讨论】：

CSS 没有损坏。但是您必须了解它的工作原理才能正确使用它。

【解决方案5】：

建议的方法都不适用于 $元素：$

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>CSS centering bug demo
</title>
<style type="text/css">
 .centered_block{ display: block;      /* this works ONLY for block elements with a fixed width  */
            margin-left:auto;
            margin-right:auto;
          }  
 .centered_text  {
            text-align: center;  /* this works ONLY for inline elements */
          }
 .centered_inline { text-align: center;  /* this works ONLY for inline block */
            display: inline-block;
            text-align: center;
            margin-left:auto;
            margin-right:auto;     
          }    
</style>
</head>
<body>
  <math class="centered_block">
    <mrow>
      <mfrac>
        <mrow><mi>a</mi></mrow>
        <mrow><mi>b</mi></mrow>
      </mfrac>
    </mrow>
  </math>
  <math class="centered_text">
    <mrow>
      <mfrac>
        <mrow><mi>a</mi></mrow>
        <mrow><mi>b</mi></mrow>
      </mfrac>
    </mrow>
  </math>
  <math class="centered_inline">
    <mrow>
      <mfrac>
        <mrow><mi>a</mi></mrow>
        <mrow><mi>b</mi></mrow>
      </mfrac>
    </mrow>
  </math>
</body>
</html>

所有数学元素都显示为左对齐。我想它又回到了

... HTML5 和 CSS 似乎没有很好地指定/当前在现代浏览器中没有正确实现，并且似乎无法在没有的情况下将这些元素居中。

【讨论】：