如何在div水平和垂直的中心放置一个表格
我们可以像下面这样设置一个图像作为一个<div>背景图像：
<style> #test { background-image: url(.http://img.dovov.comgrad.gif); background-repeat: no-repeat; background-position: center center; width:80%; margin-left:10%; height:200px; background-color:blue; } </style> <div id="test"></div>
我需要在水平和垂直的<div>中间设置一个表格。 有没有使用CSS的跨浏览器解决scheme？
居中是CSS中最大的问题之一。 但是，有一些技巧存在：
要水平居中桌面，可以将左右边距设置为自动：
<style> #test { width:100%; height:100%; } table { margin: 0 auto; /* or margin: 0 auto 0 auto */ } </style>
要垂直居中，唯一的方法就是使用javascript：
var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 ); $('table').css('margin-top', tableMarginTop) # with jQuery $$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools
没有vertical-align:middle是可能的，因为表是块而不是内联元素。
编辑
以下是一个总结CSS集中解决scheme的网站： http : //howtocenterincss.com/
水平放置中心可以说width: 50%; margin: auto; width: 50%; margin: auto; 。 据我所知，这是跨浏览器。 垂直alignment，你可以尝试vertical-align:middle; ，但它可能只适用于文本。 不过值得一试。
以下是对我有用的东西：
#div { display: flex; justify-content: center; } #table { align-self: center; }
这个垂直和水平alignment。
另外，如果你想要水平和垂直居中 – 而不是stream程devise（在这种情况下，以前的解决scheme适用） – 你可以做：
- 声明主要的div为
absolute或relative定位（我称之为content）。 - 声明一个内部的div，这将实际上持有表（我称之为
wrapper）。 - 在
wrapperdiv中声明表本身。 - 应用CSS转换将包装对象的“注册点”更改为中心。
- 将包装对象移动到父对象的中心。
样品：
<div id="content"> <div id="wrapper"> <table>...</table> </div> </div>
示例CSS：
#content { /* TODO set a width and height here */ position: relative; } #wrapper { position: absolute; left: 50%; top: 50%; /*move the object to the center of the parent object*/ -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /*these 5 settings change the base (or registration) point of the wrapper object to it's own center - so we align child center with parent center*/ }
注意：你不能摆脱包装div，因为这个样式不能直接在表上工作，所以我用div来包装它，并将其放置在div中。
您可以使用以下技术垂直和水平放置一个框：
外面的容器：
- 应该有
display: table;
内胆：
- 应该有
display: table-cell; - 应该有
vertical-align: middle; - 应该有
text-align: center;
内容框：
- 应该有
display: inline-block;
如果您使用这种技术，只需将您的表格（以及您想要的任何其他内容）添加到内容框中即可。
演示：
body { margin : 0; } .outer-container { position : absolute; display: table; width: 100%; height: 100%; background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; background: #fff; padding : 20px; border : 1px solid #000; }
<div class="outer-container"> <div class="inner-container"> <div class="centered-content"> <em>Data :</em> <table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Tom</td> <td>15</td> </tr> <tr> <td>Anne</td> <td>15</td> </tr> <tr> <td>Gina</td> <td>34</td> </tr> </table> </div> </div> </div>
只需添加margin: 0 auto; 到你的table 。 不需要添加任何财产的div
<div style="background-color:lightgrey"> <table width="80%" style="margin: 0 auto; border:1px solid;text-align:center"> <tr> <th>Name </th> <th>Country</th> </tr> <tr> <td>John</td> <td>US </td> </tr> <tr> <td>Bob</td> <td>India </td> </tr> </table> <div>
我发现我必须包括
body { width:100%; }
为“边距：0自动”工作表。
宽度：50％; 保证金：汽车; 垂直alignment：中部; 父div高度必须设置
