如何将桌子水平放置在div的中心和垂直

Question

我们可以将图像设置为<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的跨浏览器解决方案？

Answer 1

中心是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/

Answer 2

这对我有用：

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

#table {
  align-self: center;
}

这使它垂直和水平对齐。

Answer 3

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

Answer 4

只需将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添加了背景颜色，以显示表格与其中心的对齐

Answer 5

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

1. 将主要div声明为absolute或relative定位（我称之为content）。
2. 声明一个内部div，它实际上会保存表格（我称之为wrapper）。
3. 在wrapper div。
中声明表格本身
4. 应用CSS转换来更改＆＃34;注册点＆＃34;包装对象到它的中心。
5. 将包装器对象移动到父对象的中心。

样品：

<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中流动。

Answer 6

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

外部容器：

• 应该有display: table;

内部容器：

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

内容框：

• 应该有display: inline-block;

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

演示：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

另见this Fiddle！

Answer 7

我发现我必须包含

body { width:100%; }

表示“margin：0 auto”适用于表格。

Answer 8

宽度：50％;保证金：自动; 垂直对齐：中部; 必须设置父div高度