Question

我正在开发我的网站的移动版本，而且我在垂直居中两个div时遇到了麻烦。由于它是一个移动网站，我的CSS需要处理任何类型的屏幕分辨率，所以这就是我遇到问题的地方。此外，根据您所在的页面，将使用不同的图像，因此图像的分辨率也不是静态的。我需要一种方法来将我的图像div和文本div放在中心位置，无论它们的高度或宽度如何。

我在这里开始fiddle。正如您所看到的，我选择green area作为手机的“屏幕”，我希望图片垂直居中，文本位于图片顶部并垂直居中。有什么帮助吗？

到目前为止我...（在我的jsfiddle中）

HTML：

    <div id = "screen">
<div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
<div class = "overlay" id = "text">This is where the text would appear</div>

CSS：

    #screen {
width:360px;
height:640px;
background-color:#0f0;
position:relative;
overflow:hidden;
display:table-cell;
vertical-align:middle;
}

.overlay {
position:absolute;
top:0;
left:0;
}

#picture {

}

#picture img{
width:100%;

}

#text {
background-color:#000;
width:100%;
opacity:0.5;
color:#fff;

}

Answer 1

对于垂直居中，您可以将上边距/下边距设置为自动。如果我理解你想要文本的位置，这应该可行。

HTML

<div id = "screen">
    <div class = "overlay" id = "text">This is where the text would appear</div>
    <div class = "overlay" id = "picture"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/10/Tennis-Mean-Streets.jpg" /></div>
</div>

和css

#screen {
    width:360px;
    height:640px;
    background-color:#0f0;
    position:relative;
    overflow:hidden;
    display:table-cell;
    vertical-align:middle;
}

#picture {
    margin: 0 auto;
}

#picture img{
    width:100%;
}

#text {
    position: absolute;
    top:50%;
    background-color:#000;
    width:100%;
    opacity:0.5;
    color:#fff;

}

Answer 2

所以似乎没有一种纯粹的css方法来实现它，所以我最终使用了jQuery。我做了一个fiddle，以防你想看看我是怎么做的，但是它的主旨就是这个。

在文档加载时，找到任何具有“叠加”类的项目，并应用一个负余量 - 顶部高度的一半以使其居中。因为它已经具有绝对位置和顶部位置：50％，所以它将垂直居中于该项目。

$(document).ready(function(){
    $(".overlay").each(function(){
        $(this).css("margin-top", $(this)[0].scrollHeight/2*-1); 
    });
});

这很简单，我希望有一种方法可以用纯css来做，但这种方式也可以。感谢您的帮助。

Answer 3

在评论中讨论之后，我已经确定这个问题几乎没有被充分考虑到试图回答，所以这将只是希望找到这个页面的其他人得到答案的帮助

:::初步答案:::

这个问题比你看起来要容易得多。如果将图像拟合到设备的视口是没有单一的css解决方案，则需要一个javascript解决方案。

让我解释一下，如果图像比它宽得多，那么为了使图像适合屏幕，你需要将高度设置为90％的高度（为文本提供一些填充等）。但是，由于图像是可变大小，如果宽度是更大的值，您将希望宽度达到90％。这里存在问题，你不希望图像的高度和宽度都是90％，因为这会扭曲图像。所以这里需要有一些javascript来翻转某些类。

之后，如果您正在寻找基于用户点击图像的任何位置（假设这是一种图库）而不是绝对定位的项目，那么css也会变得有点毛茸茸在文档的顶部和左侧，您需要一个位于视口上的position: fixed;元素。

之前描述过的所有内容都需要再次使用javascript，因为没有简单的方法可以使fixed的内容居中，而不使用宽度/高度减半的负边距。

这样的一个例子是： http://jsfiddle.net/5hHMa/2/

在这里，我们为您提供的非常固定的案例提供了css。

.overlay {
    position:fixed;
    top:50%;
    left:50%;
    margin-top: -150px;
    margin-left: -150px;
}

#picture img{
    width: 300px;    
}

#text {
    background-color:#000;
    opacity:0.5;
    color:#fff;

}

理想情况下，您要做的不是使用边距和宽度的固定值，而是使用javascript确定这些值并设置它们。

使用有限的信息很难为您的问题形成一个完整的解决方案，但希望这可以帮助您推动正确的方向。

垂直居中两个重叠的div

3 个答案: