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

134

我们可以将图像设置为<div>like的背景图像：

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

css

— 牟
source

276

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

— 平等
source

7

傻表。谢谢，这个（margin：0 auto）也帮助了我。

— 塞萨尔（Cesar）2013年

1

这是testHeight什么

— Ajay Kulkarni 2015年

1

@AjayKulkarni #test元素的高度。对困惑感到抱歉。

— ldiqual

1

是啊，我想通了....请详细说明javascript，jQuery，AJAX等让别人能够理解

— 阿贾伊·库尔卡尼

1

正是我所需要的！我已经摆弄了几个小时的边距！

— chfw

29

这对我有用：

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

#table {
  align-self: center;
}

并将其垂直和水平对齐。

— 杰德林
source

3

这一定是最好的答案！

— riopiedra

14

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

— Redbmk
source

6

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

— 高拉夫斯
source

6

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

将主div声明为absolute或relative定位（我称它为content）。
声明一个内部div，它实际上将保存该表（我称之为wrapper）。
在wrapperdiv 内部声明表本身。
应用CSS变换将包装对象的“注册点”更改为其中心。
将包装对象移到父对象的中心。

#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对其进行包装和定位。

— 路易斯·马苏埃利
source

5

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

外部容器：

应该有 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>

展开摘要

另请参阅此小提琴！

— 约翰·斯莱格斯
source

1

我发现我必须包括

body { width:100%; }

表的“保证金：0自动”。

— 灌肠
source