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

Question

我有 2 个以上的图像项目放置在全屏背景图像（容器）的不同位置。我只需要中间的两个图像项在 page/screen 的中间水平对齐。这也需要响应，即。当浏览器 window 水平收缩时，我希望这两个项目同时向中间移动。使用我正在尝试的代码，这两个项目中的一个没有与另一个对齐，实际上当浏览器屏幕收缩以模仿纵向模式时，它向中心左侧移动了一点。问题是什么？我绝对定位并在两者上都使用 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%;}

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

Vertically aligning only 2 items on a full-screen page

css

alignment