Html 如何在网页中间放置“表格”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10042413/
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 place the "table" at the middle of the webpage?
提问by OM The Eternity
I have a very basic Table structure to be placed in middle/center of the web page. I Have a code below, I know its incomplete to make this happen, as I am bad in structuring the HTML part, please help me
我有一个非常基本的表格结构放置在网页的中间/中心。我在下面有一个代码，我知道它不完整，因为我不擅长构建 HTML 部分，请帮助我
<div align="center" style="vertical-align:bottom">
<div align="center" style="vertical-align:bottom">
<table>
<tr><td colspan="2"></td></tr>
<tr><td>Name</td><td>J W BUSH</td></tr>
<tr><td>Proficiency</td><td>PHP</td></tr>
<tr><td>COmpany</td><td>BLAH BLAH</td></tr>
</table>
</div>
</div>
Also Please explain the concept behind the application of properties and CSS in achieving this time of structuring. so that I can use it in further learning....
另外请解释在实现这个结构化过程中应用属性和 CSS 背后的概念。以便我可以在进一步学习中使用它......
I am completely newbie and dumb in HTML-CSS use... So I request you all the techies and Geeks to bear with my silly questions of HTML-CSS structuring.. Please dont leave the comments which demoralize me to go ahead with learning like "Is it a Homework..." or "GO TO TUTION CLASSES"etc...
我完全是 HTML-CSS 使用的新手和笨蛋......所以我请求你所有的技术人员和 Geeks 忍受我关于 HTML-CSS 结构的愚蠢问题......请不要留下那些让我士气低落的评论，继续学习“这是家庭作业吗……”或“去补习班”等……
回答by Peter
The shortest and easiest answer is: you shouldn't vertically center things in webpages. HTML and CSS simply are not created with that in mind. They are text formatting languages, not user interface design languages.
最短和最简单的答案是：您不应该将网页中的内容垂直居中。HTML 和 CSS 的创建并没有考虑到这一点。它们是文本格式语言，而不是用户界面设计语言。
That said, this is the best way I can think of. However, this will NOT WORK in Internet Explorer 7 and below!
也就是说，这是我能想到的最好的方法。但是，这在 Internet Explorer 7 及以下版本中不起作用！
<style>
html, body {
height: 100%;
}
#tableContainer-1 {
height: 100%;
width: 100%;
display: table;
}
#tableContainer-2 {
vertical-align: middle;
display: table-cell;
height: 100%;
}
#myTable {
margin: 0 auto;
}
</style>
<div id="tableContainer-1">
<div id="tableContainer-2">
<table id="myTable" border>
<tr><td>Name</td><td>J W BUSH</td></tr>
<tr><td>Proficiency</td><td>PHP</td></tr>
<tr><td>Company</td><td>BLAH BLAH</td></tr>
</table>
</div>
</div>
回答by Chlebta
Try this :
尝试这个 ：
<style type="text/css">
.myTableStyle
{
position:absolute;
top:50%;
left:50%;
/*Alternatively you could use: */
/*
position: fixed;
bottom: 50%;
right: 50%;
*/
}
</style>
