Question

我想在div中水平垂直居中放置一个图像（根据屏幕尺寸改变尺寸）。该div位于绝对位置，高度为100％。在那个div下，放置了另一个div。

    <body>
    <div id="wrapper">
    <div id="div1">
        <div id="center">
            <img src="http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg">
        </div>
    </div>
    <div id="div2">
    You can't see this without scrolling
    </div>
</div>
</body>

我想将测试图像垂直居中于红色div。

谢谢！

Answer 1

做这样的事情，（还有很多其他方法，这是实现你所描述的一种方式）

http://jsfiddle.net/nagendra_rao/9xZxk/4/

我已将此添加到您的CSS中，

.img{
    width:100%; 
    height:100%; 
    background:url('http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg') center center no-repeat;     /* this will automatically place your image file centred horizontally and vertically.*/ 
    background-size: 50% auto;
}
#center{
 height:100%;
}

稍微修改你的html，

<div class="img"></div>

Answer 2

http://jsfiddle.net/sY4dh/将背景大小的属性添加到上一个答案/

        #div1{
            background-color: red;
            background-image: url('http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg');
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 40% auto;
        }

CSS：垂直中心响应图像在100％高度绝对div内

2 个答案: