一页只有一个表作为内容，我可以轻松地垂直对齐吗？

Question

我已经阅读了所有浏览器垂直对齐网页内容的恐怖。我有一个网站的目标网页，其中只有一个表格，是否有一种简单的方法可以将其与html或css对齐？

非常感谢！

林恩

Answer 1

如果您知道表格的宽度和高度

你可以用CSS做到这一点。的 SEE THE DEMO

table {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px; //divide the width by 2
  margin-top: -100px; //divide the height by 2
}

但如果您不知道表格的宽度和高度

您必须使用jQuery计算这些值，使其在页面中居中显示： SEE THE DEMO

var w = $(window).width(), //browser window width
    h = $(window).height(), //browser windwo height
    $table = $('table'),  
    tw = $table.outerWidth(), //table width along with padding and border
    th = $table.outerHeight(); //table height along with padding and border

    $table.css({
        'top' : (h - th)/2 + 'px', //top: ..px will be calculated after subtracting table height from window height and dividing it by 2. 
        'left' : (w - tw)/2 + 'px' // Same goes for left: ..px
    });

不要忘记将position: relative;应用于您的牌桌，因为您使用的是top和left值，如果未提供position：absolute或relative，则该值无效。