Question

可能重复：
Vertically Center HTML Element Within a Div of Dynamic Height

我目前正在设计一个网站，我需要垂直居中一些内容。设计非常基本：固定高度标题（左对齐并始终位于页面顶部），以及水平行中垂直居中的图像下方（是的，水平滚动，我知道）。

理想情况下，我希望图像的垂直居中基于视口的100％高度 - 标题（因此动态高度可防止内容与标题重叠）。

可以在http://bit.ly/vl1XNY上找到该网站的示例，该网站目前正在使用表格进行布局。我也可以在那里找到使用的CSS和HTML（当然）。

我知道在固定高度的容器内垂直居中内容的各种解决方案，但是它们都没有对我有用，因为我使用可变高度并且不想使用绝对定位（以防止重叠）。我环顾四周，尝试了表格单元解决方案，行高度解决方案和绝对定位解决方案。

到目前为止，唯一能够完全符合我预期的解决方案是使用表格。但我想不要使用它们。是否有人知道这个问题的有效的CSS和HTML解决方案？或者至少是一个更优雅的解决方案？

Answer 1

Wohh，谈论时间安排，几分钟前我正在寻找这样一个解决方案，并且在这个主题上发现了一篇关于这个主题的文章，你可以在这里阅读所有相关内容：Centering in the Unknown。

您可以轻松修改代码，使其正常工作：

<强> CSS

#wrapper {
    background: none repeat scroll 0 0 blue;
    height: 100%;
    text-align: center;
}

#wrapper:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.center {
    display: inline-block;
    padding: 10px 15px;
    vertical-align: middle;
    width: 460px;
}

<强> HTML

<div id="wrapper">
    <div class="center">
        <img src="images/a_1.jpg" alt=" ">
    </div>
    <div class="center">
        <img src="images/a_2.jpg" alt=" ">
    </div>
</div>

Answer 2

您可以尝试以下代码：

<div style="display:table-cell;">
    <img src="..." style="... vertical-align:middle;">
    <img src="..." style="... vertical-align:middle;">
</div>

请在所有HTML的上下文中检查上述代码：

<style type="text/css">
    html, body {height:100%;}
        body {
        margin:0; padding:0;
    }
    #header {
        height:1.7em;
    }

    #content {
        display:table-cell; vertical-align:middle; height:500px;
    }

</style>

<div id="header"></div>    
<div id="content">
    <img src="..." style="... vertical-align:middle;">
    <img src="..." style="... vertical-align:middle;">
</div>

这只适用于固定高度的表格单元格，可以通过javascript计算当前视口高度来实现

垂直居中在动态高度div内的内容

2 个答案: