如何将表格水平和垂直放置在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 的跨浏览器解决方案？

原文由 Mou 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 ldiqual 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是对我有用的：

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

#table {
  align-self: center;
}

这使它垂直和水平对齐。

原文由 jdlin 发布，翻译遵循 CC BY-SA 3.0 许可协议