如何使屏幕中心(垂直和水平)居中

Question

我有这些代码块:

<table border="1px">
<tr>
<td>
my content
</td>
</tr>
</table>

我想把我的桌子放在屏幕的中央(垂直和水平).

这是一个演示.

我怎样才能做到这一点？

Answer 1

水平定心很容易.您只需将两个边距设置为"自动":

table {
  margin-left: auto;
  margin-right: auto;
}

垂直居中通常通过将父元素显示类型设置为table-cell和使用vertical-align属性来实现.假设你<div class="wrapper">的桌子周围有一个:

.wrapper {
  display: table-cell;
  vertical-align: middle;
}

更多详细信息可在http://www.w3.org/Style/Examples/007/center上找到

如果您需要支持旧版本的Internet Explorer (我不知道什么在这个奇怪且很少使用的浏览器的版本中有效;-))那么您可能想要在网上搜索更多信息,例如:http:// www .jakpsatweb.cz/css/css-vertical-center-solution.html(只是第一次点击,似乎提到了IE)

Answer 2

这可以修复屏幕上的框死点:

HTML

<table class="box" border="1px">
    <tr>
        <td>
            my content
        </td>
    </tr>
</table>

CSS

.box {
    width:300px;
    height:300px;
    background-color:#d9d9d9;
    position:fixed;
    margin-left:-150px; /* half of width */
    margin-top:-150px;  /* half of height */
    top:50%;
    left:50%;
}

查看结果

http://jsfiddle.net/bukov/wJ7dY/168/

Answer 3

我认为这应该可以解决问题：

<table border="1px" align="center">

根据http://w3schools.com/tags/tag_table.asp，此方法已弃用，请尝试一下。如果不起作用，请按照网站上的说明使用样式。

Answer 4

用于水平对齐(无CSS)

只需在table标记内插入一个align属性即可

<table align="center"></table