用vh在div内垂直居中

时间:2014-07-26 15:28:52

标签: html css vertical-alignment centering viewport-units

我目前正试图将图像居中在一个div中,该div的尺寸设置为vh。我尝试使用以图像为中心的display:table-cell;方法,但开始搞乱其他元素的大众。我想知道是否有另一种更简单的方法将这个图像垂直居中在一个div中,如同vh。我知道这可能有点令人困惑,所以希望我的代码可以提供帮助!

HTML:

<div class="graphic" style="background-color:#ff837b">
    <img src="images/WAInduo-02.svg" style="width: 100%; height: 50%;" />
</div>

CSS:

#induoIntro .graphic {
    display:block;
    height:100vh;
}

1 个答案:

答案 0 :(得分:6)

似乎vertical-align:middlevw单位存在一些不一致。尝试定位方法。 这是你的解决方案。

CSS代码:

 .graphic {
display:block;
height:100vh;
position: absolute;
top:0;
bottom:0;
width: 100%;
}

.graphic img{
vertical-align: middle;
width:100%;
    display: inline-block;
    height:50%;
    position: absolute;
    top: 0;
    bottom:0%;
    margin: auto;
}

这是工作fiddle