Question

请看一下：http://sources.freehosting.bg/landing.html

我正在尝试垂直对齐#content，以便在较大（1920x1200）和较小（1024x768）分辨率下看起来很好。我的意思是它没有滚动条。如您所见，有足够的可用空间，因此不需要滚动条。

我想出的唯一解决方案是使用JS计算#content的高度并设置填充，但我意识到这是最糟糕的解决方案。

请告诉我如何实现这一目标。

Answer 1

查看 this fiddle 是否正在寻找。简单的解决方案IMO。

它的工作方式是强制包含div表现为table-cell，并使用vertical-align: middle样式。它根本不需要你知道任何元素的高度。

小提琴中使用的代码如下。

HTML：

<div class="a">
    text inside div a
    <div class="b">
        text inside div b
    </div>
</div>

重要的风格是：

display: table-cell 
vertical-align: middle

其余的只是为了示范。 CSS：

div.a {
    border: 1px solid red;
}
div.b {
    border: 1px solid blue;
    height: 200px;
    display:table-cell;
    vertical-align:middle;
}

Answer 2

如果你的内容高度是固定的，请在内容之前加上一个div

<div id="distance"></div>
<div id="content">
  Vertically centered :D
</div>

并将其设为样式：

html, body {
height:100%;
margin:0;
padding:0;
}

div#distance {
width:1px;
height:50%;
margin-bottom:-300px; /* half of website height */
float:left;
}

div#content {
text-align:left;
margin:auto;
position: relative;
width: 950px;
height: 600px;
clear: left;
}

Answer 3

我所知道的唯一方法是使用纯CSS，没有JS而且没有黑客需要你知道你想要定位的东西的高度：

<html>
  <head>
    <style type="text/css">
      /* Give your document height */
      body, #content {
        height: 100%;
      }

      /* Give your element height */
      .thing {
        width: 20px;
        height: 300px;
        background: #000;
      }
      /* Position thing */
      #content .thing {
        position: absolute;
        top: 50%;
        margin-top: -150px; /* half the height of the thing */
      }
    </style>
  </head>
  <body>
    <div id="content">
       <div class="thing"></div>
    </div>
  </body>
</html>

编辑：更新项目的高度，容器ID。仍然可以正常工作。

垂直对齐

3 个答案: