如何将内容与html页面的中心对齐答案

【问题标题】：How to align contents to the centre of html page如何将内容与html页面的中心对齐
【发布时间】：2020-06-23 17:23:16
【问题描述】：

我有以下html代码

<body>
  <h3>Title 1</h3>
  <h3>Title 2</h3>
  <div>
    <a href="ref1">
      <button type="button">Button 1</button>
    </a>
    <span> abcd </span>
    <a href="ref2">
      <button type="button">Button 2</button>
    </a>
  </div>
  <div>
    <table>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
      </tr>
      <tr>
        <td>value1</td>
        <td>value2</td>
        <td>value3</td>
      </tr>
    </table>
  </div>
</body>

我想在下面添加 css 以按以下格式与页面居中对齐

                      title 1
                      title 2
              button1  abcd  button2
          +----------------------------+
          |   col1 |   col2  |  col3   |
          +----------------------------+
          |   val1 |   val2  |  val3   |
          +----------------------------+

表格和标题应位于页面中心。带按扣的 2 个按钮应该与中心对齐在同一行。我怎样才能做到这一点？

【问题讨论】：

标签： html css styles

【解决方案1】：

将以下样式应用于body标签显示：弹性；对齐内容：中心；

【讨论】：

【解决方案2】：

将以下样式添加到 html 顶部的 body 标记中。

<body style="text-align: center; display: grid; justify-content:center;">

【讨论】：

【解决方案3】：

    <body>
        <center>
          <h3>Title 1</h3>
          <h3>Title 2</h3>
          <div >
            <a href="ref1">
              <button type="button" >Button 1</button>
            </a>
            <span> abcd </span>
            <a href="ref2">
               <button type="button" >Button 2</button>
            </a>
          </div>
          <div >
             <table >
                <tr>
                   <th>Col1</th>
                   <th>Col2</th>
                   <th>Col3</th>
                </tr>
                <tr>
                   <td>value1</td>
                   <td>value2</td>
                   <td>value3</td>
                 </tr>
             </table>
         </div>
         </center>
        </body>

使用 HTML center 标签将正文的全部内容对齐到中心。

【讨论】：

【解决方案4】：

为此使用 CSS GRID 你为什么要使用表格？

【讨论】：