css - 创建一个垂直和水平居中的html div - Thinbug

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

时间：2010-09-13 18:12:36

标签： css centering

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

<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的唯一问题是页面在调整浏览器窗口大小时不会动态调整大小。有没有更好的方法呢？

1 个答案:

答案 0 :(得分：3)

您可以使用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' */
}