创建一个垂直和水平居中的html div答案

【问题标题】：Creating a vertically and horizontally centered html div创建一个垂直和水平居中的html div
【发布时间】：2011-04-11 19:36:56
【问题描述】：

我正在尝试创建一个类似于 Google 主页的页面。它是在显示链接的页面顶部有一个位于中心的输入框和一个 div。如果我更改浏览器窗口的大小，我还希望页面能够动态调整自身大小。我使用 yui2 网格 css 和表格取得了部分成功。这是一个sn-p：

<body>
  <div id="doc3">
    <div id="hd"><a style="float:left" href="link1.com"> link1</div> 
    <div id="bd" style="display: table; height: 400px;">
      <div style="display: display: table-cell; vertical-align: middle">
        <input name="searchbox" value="searchinput" size="40" />
        <input name="submit" type="submit" value="search />
      </div>
    </div> 
  </div>
</body>

这个 html 的唯一问题是页面不会在调整浏览器窗口大小时动态调整大小。有没有更好的方法？

【问题讨论】：

我惊讶地发现 Google 使用 <center> 标签来影响它们的水平居中。考虑到他们在其他领域的领导地位，这对我来说似乎很奇怪......
是的，我也观察到了这一点。我宁愿避免它，因为它已被弃用。 w3schools.com/tags/tag_center.asp

标签： css centering

【解决方案1】：

你可以使用jQuery来完美设置。

jQuery

$(window).resize(function() {
    var wh = (($(window).height()-$('#center').height())/2)+'px';
    var ww = (($(window).width()-$('#center').width())/2)+'px';
    $('#center').css({
        top: wh,
        left: ww
    });
}).resize();

CSS

#center {
    border: 1px solid black;
    position: absolute;
    width: 50px;
}

如果你不关心完全垂直居中，你可以这样做：

#center {
    border: 1px solid black;
    margin: 0 auto;
    position: relative;
    width: 50px;
    top: 45%; /* or whatever % looks 'right' */
}

【讨论】：

谢谢罗伯特，这就是我要找的。span>