it-swarm.cn

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

我有这些代码块:

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

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

这是一个演示

我怎样才能做到这一点?

7
cafu

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

_ 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/

15
Andres Ilich

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

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)

15
Arsen7

用于水平对齐(无CSS)

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

<table align="center"></table
5
user6500381

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

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

根据 http://w3schools.com/tags/tag_table.asp 这已被弃用,但请尝试一下。如果它不起作用,请选择网站上提到的样式。

4
kgrevehagen

我现在一直在使用这个小作弊。你可能会喜欢它。嵌套要在另一个表中居中的表:

<table height=100% width=100%>
<td align=center valign=center>

(在这里添加你的表)

</td>
</table>

无论发生了什么,对齐和对齐都将表准确地放在屏幕中间。

3
doug landmesser

我试过HTML5中的align属性。它不受支持。我还尝试了flex-align和vertival-align与样式属性。仍然无法将TABLE放在屏幕中央。以下样式放置表位于水平中心。

风格=“保证金:汽车;”

0
Pabitra Dash

这家伙 有我们想要的魔杖,伙计们。

引用他的回答:

只需添加“position:fixed”即使向下滚动它也会保持在视图中。在 http://jsfiddle.net/XEUbc/1/看到它

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
0
Bukov

中心的一种方式 任何 水平和垂直高度和宽度未知的元素:

table {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

参见示例

0
eicksl