在CSS中覆盖图像的麻烦

Question

我正在尝试覆盖5个大小相同的图像，即614 w x 814 h。因为每个图像的部分是透明的，所以它们一起构成一个完整的图像。我无法使用原始图像向您显示，因为他们已经获得了个人数据。相反，我用色块来向你展示我做的一个例子。

Fiddle

我试图将所有图像置于屏幕中央，并且无论浏览器放大多远，或者窗口是否调整大小，它们都保持在那里至关重要。为此，我为每个图像使用此代码：

#blue{
margin-top: 10%; 
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 33%;
height: 100%;
}

我的问题是：如何将这5张图片放在屏幕中间，将它们全部叠加在一起;蓝色＆lt;绿色＆lt;紫色＆lt;黄色＆lt;红色。并且仍然保持它们的位置，以便每个图像之间没有空间，这样它们可以形成一个由五种不同颜色组成的块？

有没有比我在小提琴中向你展示的更容易，更准确的方法呢？

Answer 1

我找到了解决方案。我在每个颜色块中使用了这个代码，这就是我需要的

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Yep! */
  width: 48%;
  height: 59%;

Answer 2

将它们全部放在一个div中，并将其放在中心--Paulie_D

带有图像的带有刻度的容器。

＆＃13;

＆＃13;

html {
  height: 100%;
}
body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container img {
  position: absolute;
  top: 0;
  left: 0;
}
.container img:nth-of-type(1) {
  position: relative;
}

＆＃13;

<div class="container">
  <img src="http://lorempixel.com/g/100/100" />
  <!--place images here!-->
</div>

＆＃13;

＆＃13;

＆＃13;