如何定位一个桌子在 div 的中心水平和垂直

我们可以将图像设置为 <div>的背景图像，如:

<style>
#test {


background-image: url(./images/grad.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的跨浏览器解决方案？

324949 次浏览
小开

要定位水平中心，可以说 width: 50%; margin: auto;。据我所知，那是跨浏览器。对于垂直对齐，您可以尝试 vertical-align:middle;，但它可能只适用于文本。不过值得一试。

小开
最佳答案

居中是 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 中心解决方案: http://howtocenterincss.com/

小开

我发现我必须把

body { width:100%; }

为“页边距: 0自动”工作的表。

小开

此外，如果你想在水平和垂直方向都居中—— 而不是采用流设计(在这种情况下，应用以前的解决方案)——你可以这样做:

  1. 将主 div 声明为 absolute或 relative定位(我称之为 content)。
  2. 声明一个内部 div，它将实际保存表(我称之为 wrapper)。
  3. 在 wrapper div 中声明表本身。
  4. 应用 CSS 转换将包装器对象的“注册点”更改为其中心。
  5. 将包装对象移动到父对象的中心。

#content {
width: 5em;
height: 5em;
border: 1px solid;
border-color: red;
position: relative;
}


#wrapper {
width: 4em;
height: 4em;
border: 3px solid;
border-color: black;
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*/
}


table {
width: 100%;
height: 100%;
border: 1px solid;
border-color: yellow;
display: inline-block;
}
<div id="content">
<div id="wrapper">
<table>
</table>
</div>
</div>

注意: 您不能去掉包装器 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>

也看到 这把小提琴！

小开

以下是对我有效的方法:

#div {
display: flex;
justify-content: center;
}


#table {
align-self: center;
}

这个使它垂直和水平排列。

小开

只需将 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>

注意: 为 div 添加了背景颜色，以便可视化表格到其中心的对齐方式

小开

由于我还不能发表评论，我将在这里发表我的评论到 Jdlin。如果您想在不设置表本身样式的情况下实现这一点，您可以这样做:

#div
{
display: flex;
justify-content: center;
align-items: center;
}
小开

在加载完成之后在底部使用简单的 javascript..。

  <script>
var div = document.getElementById("test");
var table = document.getElementById("tabel");
var tableMarginTop = Math.round( (div.offsetHeight - table.offsetHeight) / 2 );
document.getElementById("tabel").style["margin-top"] = tableMarginTop;
</script>

提交答案