如何在 div 中将表格水平垂直居中定位

Question

我们可以将一张图片设置为 <div> 的背景图像，如下所示：

<style>
    #test { 

        background-image: url(./images/grad.gif); 
        background-repeat: no-repeat;
        background-position: center center; 

        width:80%; 
        margin-left:10%; 
        height:200px; 
        background-color:blue;

    }

</style>

<div id="test"></div>

我需要将一个表格水平垂直居中在一个 <div> 中，有没有使用 CSS 的跨浏览器解决方案？

- Mou

Answer 1

在CSS中，居中是最大的问题之一。但是，存在一些技巧:

要水平居中您的表格，可以将左右边距设置为自动:

<style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>

要垂直居中它的唯一方法是使用JavaScript：

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools

由于表格是块级元素而不是行内元素，因此无法使用vertical-align: middle使其垂直居中。

编辑

以下网站总结了CSS居中解决方案：http://howtocenterincss.com/

- ldiqual

---

傻瓜表格。谢谢，这个（margin:0 auto）也对我有帮助。 - Cesar

这里的 testHeight 是什么？ - Ajay Kulkarni

@AjayKulkarni 获取 #test 元素的高度。对于造成的困惑感到抱歉。 - ldiqual

是的，我弄明白了... 请详细说明 javascript、jQuery、AJAX 等，以便其他人能够理解。 - Ajay Kulkarni

正是我需要的！我已经折腾了几个小时的填充和边距！ - chfw

Answer 2

以下是对我有效的方法：

#div {
  display: flex;
  justify-content: center;
}

#table {
  align-self: center;
}

并且这使它在垂直和水平方向上对齐。

- jdlin

---

这一定是最棒的答案！ - riopiedra

Answer 3

要水平居中，您可以使用 width: 50%; margin: auto;。据我所知，这适用于跨浏览器。对于垂直对齐，您可以尝试使用vertical-align:middle;，但它可能仅适用于文本相关内容。不过还是值得一试的。

- redbmk

Answer 4

只需在您的table中添加margin: 0 auto;，无需向div添加任何属性。

<div style="background-color:lightgrey">
 <table width="80%" style="margin: 0 auto; border:1px solid;text-align:center">
    <tr>
      <th>Name </th>
      <th>Country</th>
    </tr>
    <tr>
      <td>John</td>
      <td>US </td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>India </td>
    </tr>
 </table>
<div>

注意：添加了背景颜色到 div 中以可视化表格相对于其中心的对齐方式

- Gaurravs

Answer 5

此外，如果您想要水平和垂直居中 -而不是使用流式设计（在这种情况下，可以使用先前的解决方案）- 您可以执行以下操作：

1. 将主div声明为绝对或相对定位（我称之为content）。
2. 声明一个内部div，它实际上将保存表格（我称之为wrapper）。
3. 在wrapper div中声明表格本身。
4. 应用CSS transform来更改wrapper对象的“注册点”，使其居中。
5. 将wrapper对象移动到父对象的中心。

#content {
  width: 5em;
  height: 5em;
  border: 1px solid;
  border-color: red;
  position: relative;
  }

#wrapper {
  width: 4em;
  height: 4em;
  border: 3px solid;
  border-color: black;
  position: absolute;
  left: 50%; top: 50%; /*move the object to the center of the parent object*/
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*these 5 settings change the base (or registration) point of the wrapper object to it's own center - so we align child center with parent center*/
  }

table {
  width: 100%;
  height: 100%;
  border: 1px solid;
  border-color: yellow;
  display: inline-block;
  }

<div id="content">
    <div id="wrapper">
        <table>
        </table>
    </div>
</div>

注意：你不能摆脱包裹的 div，因为这种样式不能直接作用于表格上，所以我使用一个 div 来包裹它并定位，而表格则在 div 内部流动。

- Luis Masuelli

Answer 6

您可以使用以下技巧将一个框水平和垂直居中：

外部容器：

应该具有"display: table;"。

内部容器：

应该具有"display: table-cell;"、"vertical-align: middle;"和"text-align: center;"。

内容框：

应该具有"display: inline-block;"。

如果您使用此技术，请将表格（以及您想要添加的任何其他内容）添加到内容框中。

演示：

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <em>Data :</em>
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Anne</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Gina</td>
                <td>34</td>
            </tr>
        </table>
     </div>
   </div>
</div>

参见这个 Fiddle 程序！

- John Slegers

Answer 7

我发现我必须包含。

body { width:100%; }

对于表格来说，"margin: 0 auto" 要起作用。

- enegue

Answer 8

由于我还不能发表评论，我会在jdlin这里发布我的评论。如果你想在不给表格本身设置样式的情况下完成这个任务，你可以这样做：

#div 
{
    display: flex;
    justify-content: center;
    align-items: center;
}

- KingKevin23

---

这并没有为问题提供答案。一旦你拥有足够的声望，你就能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Nol4635

Answer 9

在加载完成后，在底部使用简单的JavaScript代码...

  <script>
    var div = document.getElementById("test");
    var table = document.getElementById("tabel");
    var tableMarginTop = Math.round( (div.offsetHeight - table.offsetHeight) / 2 );
    document.getElementById("tabel").style["margin-top"] = tableMarginTop;
  </script>

- Howard J