CSS 在动态大小的父级中垂直居中。

Question

这是另一个关于在 div 中垂直居中的问题，但我尝试了许多其他答案中讨论的解决方案，但均无济于事。

Here's an example of the code to play with: https://codesandbox.io/s/z2qzxwk99x

箭头图标在视口中垂直居中，而不是查看器包装器 div。因此，如果您使页面非常窄，它会完全脱离图像，而不是保持垂直居中。

.viewer-wrapper {
    background-color: #1b8dbb;
    position: relative;
}

.arrow-wrap {
    position: absolute;
    max-height: 100%;
    line-height: 95vh;
    background-color: #4cae4c;
    margin: auto;
    opacity: .9;
    left: 0px
}

.arrow-icon {
    background-color: orangered;
}

.comic-page {
      object-fit: contain;
      max-height: 95vh;
      width: 100%;
}

<div className="viewer-wrapper"> 
    <div className="arrow-wrap">
      <LeftArrow className="arrow-icon" size={75} />
    </div>

    <img className="comic-page"
        src="http://assets-production.rovio.com/s3fs-public/hatchlings_0.jpg"
      about="This is an image"
    />
  </div>

Answer 1

这里的魔力是Flexbox（还有 Grids，但 Flexbox 有更好的浏览器支持）。保持相同的 HTML 布局，你可以像这样使用 somerthig：

.viewer-wrapper {
    background-color: #1b8dbb;
    display: flex;
    align-items: flex-start;
}

.arrow-wrap {
    background-color: #4cae4c;
    margin: auto;
    opacity: .9;
}

.arrow-icon {
    background-color: orangered;
}

.comic-page {
      object-fit:contain;
      min-height: 100%;
      max-width: 100%;
}

Answer 2

根据您对 IE 的支持程度，有不同的方式来完成垂直对齐。

如果你不需要支持IE，你可以使用flex显示属性：

.viewer-wrapper{
    display: flex;
    align-items: center;
}

或者，继续您正在尝试做的事情。您缺少的是 top: 属性。由于您已经正确地创建了父元素 position: relative，设置 top: 50% 会将您的箭头设置为 begin 在 viewer-wrapper 元素的中间位置。从这里你需要设置一个负边距来校正箭头的高度。由于看起来您指定了 75(px?) 的大小，因此您可以这样实现：

.arrow-wrap {
    position: absolute;
    background-color: #4cae4c;
    margin-top: -37.5px;
    left: 0px;
}

您不应该设置任何其他边距。

howtocenterincss.com 是一个很好的资源，我用来帮助回答你的问题。