CSS:当没有固定大小的div时,垂直对齐div

Question

如何<div>使用CSS垂直对齐包含图像(或闪光)的图像.高度和宽度是动态的.

Answer 1

这是一个纯粹的CSS2解决方案,用于水平和垂直居中,没有容器和儿童的已知尺寸.没有黑客入侵.我发现了这个答案,我也在这个答案中证明了这一点.

该解决方案是基于vertical-align: middle在与结合line-height: 0,其母体具有固定线高度.

HTML:

<span id="center">
    <span id="wrap">
        <img src="http://lorempixum.com/300/250/abstract" alt="" />
    </span>
</span>

而CSS:

html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}    
#wrap {
    line-height: 0;
}
#wrap img {
    vertical-align: middle;
}

在IE8,IE9,Opera 11.51,Safari 5.0.5,FF 6.0,Chrome 13.0中测试Win7.

唯一需要注意的是IE7,其中两个最里面的元素必须在一行声明,正如这个小提琴所示:

<span id="center">
    <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>

请注意,IE7也需要跨度.在每个其他浏览器中,跨度可能是div.

Answer 2

你可以通过使用内联块来实现这一点,一个height: 100%(和相同的高度HTML和BODY)和vertical-align: middle.

示例1:http://jsfiddle.net/kizu/TQX9b/(很多内容,所以它的全宽)

示例2:http://jsfiddle.net/kizu/TQX9b/2/(任意大小的图像)

在这个例子中我使用spans,所以它可以在没有黑客的IE中工作,如果你想使用divs,不要忘记为IE添加条件注释.helper, .content { display: inline; zoom: 1; },所以内联块可以用于块元素.

Answer 3

除了这里的其他答案,CSS3灵活的盒子模型将允许您实现这一目标.

您只需要一个容器元素.其中的所有内容都将根据灵活的盒子模型规则进行布局.

<div class="container">
    <img src="/logo.png"/>
</div>

CSS非常简单,实际上:

.container { 
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

为简洁起见,我省略了供应商前缀规则.

这是一个演示,其中img始终位于页面的中心:http://jsfiddle.net/zn8bm/

请注意,Flexbox是一个初出茅庐的规范,目前仅在Safari,Chrome和Firefox 4+中实现.