html - 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

不推荐使用中心标记：为什么在 HTML 中不推荐使用 <center> 标记？

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; 
}

Answer 2

您始终可以将其放在<center>标签中或将样式放在中心标签中。肯定有效！

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