居中表在div的中间，垂直和水平

Question

如何将表格置于div中，如下所示：

我尝试过几种方法，但都没有。这是其中之一。

<div style="width: 500px; height: 200px; border: 1px solid black; vertical-align: middle; text-align: center;">
    <table style="border: 1px solid black;">
        <tr>
            <td>testing</td>
            <td>testing</td>
        </tr>
    </table>
</div>

如果可以的话，可以完成吗？

Answer 1

您可以随时将其放在<center>标签中，也可以将其放在中心标签的样式中。确实有效！

如果它在另一个div中，您可以使用left:50%;或类似的东西。

Answer 2

不推荐使用中心代码：Why is the <center> tag deprecated in HTML?

Joel Etherton之间的链接非常好，我只想提供一些代码，以便您可以在那里看到您的表格。

看看我为你怂恿的这个jsfiddle：http://jsfiddle.net/25hzA/1/

如果jsfiddle失败。

HTML：

I am not being centered
<div class="block" style="height: 100px;">
 <div class="centered">
  <table style="width:100%;border: 1px solid black;">
   <tr>
    <td>testing</td>
    <td>testing</td>
   </tr>
  </table>
 </div>
</div>

CSS：

.block {
 text-align: center;
 background: #c0c0c0;
 border: #a0a0a0 solid 1px;
 margin: 20px;
}
.block:before {
 content:'';
 display: inline-block;
 height: 100%;
 vertical-align: middle;
 margin-right: -0.25em;
 /* Adjusts for spacing */
}
.centered {
 display: inline-block;
 vertical-align: middle;
 width: 300px;
 padding: 10px 15px;
 border: #a0a0a0 solid 1px;
 background: #f5f5f5; 
}