图像在彼此顶部，同时居中垂直。和霍

Question

我查阅了一些关于如何将 div 置于页面中间的提示。我用了这个方法：

width: 750px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -200px;
margin-left: -375px;

所以，既然 div 位于页面中间，我需要在其中的一些图像直接排列在另一个之上。如果这样做，我可以使用 jQuery 将它们淡出，显示新图像。

现在，我尝试了许多不同的技术来排列它们，但是当它们像这样居中时，它们都不起作用。

HTML：

<div class="choose" align="center">
    <h2 id="question">Rock, paper, or scissors?</h2>

    <img src="Images/Rock.png" id="rock">
    <img src="Images/Result/Red Rock.png" id="Selected" style="opacity:1">
    <img src="Images/Paper.png" id="paper">
    <img src="Images/Result/Red Paper.png" id="Selected" style="opacity:1">
    <img src="Images/Scissors.png" id="scissors">
    <img src="Images/Result/Red Scissors.png" id="Selected" style="opacity:1">
</div>

CSS：

.choose {
    width: 750px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -200px;
    margin-left: -375px;
}

.choose img {
    margin-left: 5px;
    margin-right: 5px;
    width: 150px;
}

我该怎么做？

如果您没有注意到，这是一个石头剪刀布游戏。 Here's what I've made so far.

Answer 1

您可以将带有absolute 的图像放置在相同的坐标中，以便它们相互堆叠。

当您的元素具有特定宽度时，left:0; right:0; margin:auto; 是一种将其水平居中于其 relative 父元素的好方法。同样的方法适用于垂直居中。

.choose img {
    width:150px;
    height:150px;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

您也可以使用此方法从中心偏移元素。

.choose img.rock {
    left:-300px;
}

.choose img.sci {
    left:300px;
}

石头在左边 300，剪刀在右边 300。