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

Z时代
2024-01-10
分类：问答

我们可以将图片设置为<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中最大的问题之一。但是，存在一些技巧：

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

<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是可能的，因为表是一个块而不是一个内联元素。