html - 如何用css准确定位div

Question

我确信这非常简单，但我是 css 新手。我本质上是在尝试定位一些呈现的排版并使其无论浏览器的大小如何都保持居中。我试过使用带百分比的边距，但这似乎不起作用。

这是我的代码。

html

<div class="weare">
    <img src="image/textrenders/weare.png" />
</div>
<div class="shaftesburytv">
    <img src="image/textrenders/Shaftesburytv.png" />
</div>
<div class="awebbasedstudio">
    <img src="image/textrenders/awebbasedstudio.png" />
</div>

CSS

.weare {}

.shaftesburytv {}

.awebbasedstudio {}

我希望结果看起来像 like this

如有任何帮助，我们将不胜感激。

Answer 1

简化您的内容:

<div id="container">
    <img src="http://placekitten.com/200/50">
    <img src="http://placekitten.com/300/100">
    <img src="http://placekitten.com/250/75">
</div>

然后确保容器与包含的最大图像具有相同的宽度，并将 margin:0 auto; 应用于它以居中。最后将 display:block 放在图像上，使它们都垂直堆叠:

#container {
    margin:100px auto;
    width:300px;
}
#container img {
    display:block;
}

Sample here .

或者，如果您还想垂直居中，您也可以使用绝对定位，然后在对象的绝对大小上使用负边距 - 对您来说没问题，因为图像大小是固定的:

#container {
    margin-left:-150px;
    margin-top:-112px;
    left:50%;
    position:absolute;
    top:50%;
}
#container img {
    display:block;
}

Sample of this approach here .