如何使用CSS实现HTML表格在页面居中显示

问题原因 #

• 你给body设置了display: inline-block属性，导致body宽度无法占满浏览器视口，内部元素的左右自动margin规则无法生效
• 包裹表格的.Table容器也设置了display: inline-block，margin-left: auto和margin-right: auto仅对块级元素生效，对行内块元素无效
• .Table容器中存在无效属性position: cen，无任何实际作用
• 你把width: 900px写在了table,tr,td,th的公共样式里，会导致每个单元格都被强制设为900px宽度，引发布局错乱

修正后代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Homework Tracker</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;600&display=swap" rel="stylesheet">
    
    <style>
        body{
            font-family: 'Outfit', sans-serif;
            text-align: center;
            background-color: rgb(248, 250, 251);
        }

        table{
          border-collapse: collapse;
          width: 100%;
          background-color: white;
          text-align: center;
        }
        td,th{
          padding-bottom: 10px;
          padding-top: 10px;
        }

        .Table{
          filter: drop-shadow(0 0 1rem rgb(238, 238, 238));
          border: 0px white;
          border-radius: 16px; 
          overflow: hidden;
          max-width: 900px;
          display: block;
          margin-left: auto;
          margin-right: auto;
        }
    </style>
  </head>
  <body>
    <div class = "Table">
      <table>
        <tr>
          <td>9:00 AM - 9:45 AM</td>
          <td>Science<br><i>Gaeeni</i><br><b>Science Lab</b></td>
          <td>Mech<br><i>Perlman</i><br><b>Room 7</b></td>
          <td>Math<br><i>Perlman</i><br><b>Room 7</b></td>
          <td>Math<br><i>Perlman</i><br><b>Room 7</b></td>
          <td>Math<br><i>Cardillo</i><br><b>Room 9</b></td>
        </tr>
      </table>
    </div>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Max Herczeg