CSS 如何将表格水平和垂直放置在div的中心

How to position a table at the center of div horizontally & vertically

提问by Mou

We can set a image as background image of a <div>like:

我们可以将图像设置为<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>

I need to set a table at the center of a <div>horizontally & vertically. Is there a cross-browser solution using CSS?

我需要在<div>水平和垂直的中心设置一张桌子。是否有使用 的跨浏览器解决方案CSS？

回答by ldiqual

Centering is one of the biggest issues in CSS. However, some tricks exist:

居中是 CSS 中最大的问题之一。但是，存在一些技巧：

To center your table horizontally, you can set left and right margin to auto:

要将表格水平居中，您可以将左右边距设置为自动：

<style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>

To center it vertically, the only way is to use javascript:

要垂直居中，唯一的方法是使用 javascript：

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools

No vertical-align:middleis possible as a table is a block and not an inline element.

不可以vertical-align:middle，因为表是块而不是内联元素。

Edit

编辑

Here is a website that sums up CSS centering solutions: http://howtocenterincss.com/

这是一个总结 CSS 居中解决方案的网站：http: //howtocenterincss.com/

回答by Jonah Davis

Here's what worked for me:

以下是对我有用的内容：

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

#table {
  align-self: center;
}

And this aligned it vertically and horizontally.

这将它垂直和水平对齐。

回答by redbmk

To position horizontally center you can say width: 50%; margin: auto;. As far as I know, that's cross browser. For vertical alignment you can try vertical-align:middle;, but it may only work in relation to text. It's worth a try though.

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

回答by Gaurravs

Just add margin: 0 auto;to your table. No need of adding any property to 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>

Note: Added background color to div to visualize the alignment of table to its center

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

回答by Luis Masuelli

Additionally, if you want to center both horizontally and vertically -instead of having a flow-design (in such cases, the previous solutions apply)- you could do:

此外，如果您想水平和垂直居中 -而不是进行流设计（在这种情况下，以前的解决方案适用）- 您可以这样做：

1. Declare the main div as absoluteor relativepositioning (I call it content).
2. Declare an inner div, which will actually hold the table (I call it wrapper).
3. Declare the table itself, inside wrapperdiv.
4. Apply CSS transform to change the "registration point" of the wrapper object to it's center.
5. Move the wrapper object to the center of the parent object.

1. 将主 div 声明为absolute或relative定位（我称之为content）。
2. 声明一个内部 div，它实际上将保存表（我称之为wrapper）。
3. 在wrapperdiv 中声明表本身。
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>

Note: You cannot get rid of the wrapper div, since this style does not work directly on tables, so I use a div to wrap it and position it, while the table is flowed inside the div.

注意：你不能去掉包装器 div，因为这种样式不能直接在表格上工作，所以我使用一个 div 来包装它并定位它，而表格在 div 内流动。

回答by John Slegers

You can center a box both vertically and horizontally, using the following technique :

您可以使用以下技术将框垂直和水平居中：

The outher container :

外部容器：

• should have display: table;

• 应该有 display: table;

The inner container :

内部容器：

• should have display: table-cell;
• should have vertical-align: middle;
• should have text-align: center;

• 应该有 display: table-cell;
• 应该有 vertical-align: middle;
• 应该有 text-align: center;

The content box :

内容框：

• should have display: inline-block;

• 应该有 display: inline-block;

If you use this technique, just add your table (along with any other content you want to go with it) to the content box.

如果您使用此技术，只需将您的表格（以及您想要使用的任何其他内容）添加到内容框中。

Demo :

演示：

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>

See also this Fiddle!

另见这个小提琴！

回答by enegue

I discovered that I had to include

我发现我必须包括

body { width:100%; }

for "margin: 0 auto" to work for tables.

对于“margin: 0 auto”适用于表格。