在全屏页面上仅垂直对齐2个项目

Question

我有超过2个图像项目放在不同的位置对着全屏背景图像（容器）。我只需要中心的两个图像项目在页面/屏幕的中间水平对齐。这也需要响应，即。当浏览器窗口水平收缩时，我希望这两个项目相互串联向中间移动。使用我正在尝试的代码，两个项目中的一个没有与另一个排队，并且实际上当浏览器屏幕缩小到模仿肖像模式时移动中心的一点点。有什么问题？我绝对定位并在两者上使用margin: auto。这是 the code 。我会很感激。

PS，由于某种原因，箭头在jfiddle中上下移动，同时保持其水平对齐;在我的情况下，这不会发生;在我的情况下，箭头只保留其垂直位置（因为我想要它），但是当我收缩浏览器宽度时离开中心（这不是我想要的;我需要它以保持它在中心的水平位置）

Answer 1

如果您想要水平和垂直两个div（即屏幕的死点！），您可以使用以下CSS ......

#div1,
#div2 {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  }

如果您希望图像响应屏幕宽度，那么在图像上添加最大宽度可以解决这个问题。

img {max-width: 100%;}