Html 如何使屏幕表格居中（垂直和水平）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7455362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center a table of the screen (vertically and horizontally)
提问by cafu
I have these code block:
我有这些代码块：
<table border="1px">
<tr>
<td>
my content
</td>
</tr>
</table>
I'd like to show my table in the center of the screen (vertically and horizontally).
我想在屏幕中央（垂直和水平）显示我的表格。
How can I do that?
我怎样才能做到这一点？
回答by Arsen7
Horizontal centering is easy. You just need to set both margins to "auto":
水平居中很容易。您只需要将两个边距都设置为“自动”：
table {
margin-left: auto;
margin-right: auto;
}
Vertical centering usually is achieved by setting the parent element display type to table-celland using vertical-alignproperty. Assuming you have a <div class="wrapper">around your table:
垂直居中通常是通过将父元素的显示类型设置为table-cell和 usingvertical-align属性来实现的。假设你<div class="wrapper">的桌子周围有一个：
.wrapper {
display: table-cell;
vertical-align: middle;
}
More detailed information may be found on http://www.w3.org/Style/Examples/007/center
更详细的信息可以在http://www.w3.org/Style/Examples/007/center上找到
If you need support for older versions of Internet Explorer (I do not know what works in what version of this strange and rarely used browser ;-) )then you may want to search the webfor more information, like: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html(just a first hit, which seems to mention IE)
如果您需要对旧版本 Internet Explorer 的支持（我不知道在这个奇怪且很少使用的浏览器的哪个版本中有效；-)）那么您可能需要在网络上搜索更多信息，例如：http://www .jakpsatweb.cz/css/css-vertical-center-solution.html（只是第一次点击，似乎提到了 IE）
回答by Andres Ilich
This fixes the box dead center on the screen:
这将修复屏幕上的框死点：
HTML
HTML
<table class="box" border="1px">
<tr>
<td>
my content
</td>
</tr>
</table>
CSS
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%;
}
View Results
查看结果
回答by kgrevehagen
I think this should do the trick:
我认为这应该可以解决问题：
<table border="1px" align="center">
According to http://w3schools.com/tags/tag_table.aspthis is deprecated, but try it. If it does not work, go for styles, as mentioned on the site.
根据http://w3schools.com/tags/tag_table.asp这已被弃用，但请尝试一下。如果它不起作用，请选择网站上提到的样式。
回答by user6500381
For horizontal alignment (No CSS)
用于水平对齐（无 CSS）
Just insert an align attribute inside the table tag
只需在 table 标签内插入一个 align 属性
<table align="center"></table
回答by doug landmesser
I've been using this little cheat for a while now. You might enjoy it. nest the table you want to center in another table:
我已经使用这个小骗子有一段时间了。你可能会喜欢它。将要居中的表格嵌套在另一个表格中：
<table height=100% width=100%>
<td align=center valign=center>
(add your table here)
（在此处添加您的表格）
</td>
</table>
the align and valign put the table exactly in the middle of the screen, no matter what else is going on.
align 和 valign 将表格准确地放在屏幕中间，无论发生什么。
回答by eicksl
One way to center anyelement of unknown height and width both horizontally and vertically:
水平和垂直居中任何未知高度和宽度的元素的一种方法：
table {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Alternatively, use a flex container:
或者，使用弹性容器：
.parent-element {
display: flex;
justify-content: center;
align-items: center;
}
回答by Pabitra Dash
I tried above align attribute in HTML5. It is not supported. Also I tried flex-align and vertival-align with style attributes. Still not able to place TABLE in center of screen. The following style place table in center horizontally.
我在 HTML5 中尝试了上面的 align 属性。不支持。我还尝试了 flex-align 和 vertival-align 与样式属性。仍然无法将 TABLE 放置在屏幕中央。以下样式将表格水平居中放置。
style="margin:auto;"
样式=“保证金：自动；”
回答by Bukov
This guyhad the magic wand we were looking for, guys.
这家伙有我们要找的魔杖，伙计们。
To quote his answer:
引用他的回答：
just add "position:fixed" and it will keep it in view even if you scroll down. see it at http://jsfiddle.net/XEUbc/1/
只需添加“位置：固定”，即使您向下滚动，它也会保持在视图中。在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;
}
