Question

我有一个id =“content”的div。它在体内，包含所有数据。

<body>
<div id="content">
</div>
</body>

如何实现这个div的垂直对齐？我尝试使用vertical-align：middle;在风格，但它不起作用。有人可以帮忙吗？

Answer 1

这个问题已经被问过并回答了数百次，但我发现最好的资源就在这里：

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Answer 2

你可以在这里得到想法：

<div id="t01" class="tag">
  <div class="small">
    <div class="globe-arrow"></div>
  </div>
</div>

.tag {background: none repeat scroll 0 0 red;
    display: block;
    height: 400px;
    left: 50%;
    margin-left: -200px;
    margin-top: -200px;
    position: absolute;
    top: 50%;
    width: 400px}
.small { background: none repeat scroll 0 0 #EBEBEB;
    height: 300px;
    left: 50%;
    margin-left: -150px;
    margin-top: -150px;
    position: absolute;
    top: 50%;
    width: 300px;}

Answer 3

很容易就可以使用它：

#content {
margin: 0 auto;
width:960px;
position:relative
}

Answer 4

此解决方案与我完美匹配。即使它是div中的链接或文本，这个CSS类也可以垂直对齐DIV中的内容

 .verticalCenterDivText{
        height: 29px;
        line-height: 29px;
    }

如何实现div的垂直对齐

4 个答案: