Question

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

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

箭头图标在视口中垂直居中，而不是在viewer-wrapper 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

根据您对IE所需的支持程度，有不同的方法可以实现垂直对齐。

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

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

或继续你想要做的事情。您遗失的是top:属性。由于您已经正确地创建了父元素position: relative，因此设置top: 50%会将箭头设置为开始在viewer-wrapper元素的中间位置。从这里你需要设置一个负边距来校正箭头的高度。因为看起来你指定的大小为75（px？），你可以这样做：

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

您不必设置任何其他边距。

这方面的一个很好的资源，以及我曾经帮助回答你的问题，是howtocenterincss.com。

Answer 2

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

＆＃13;

.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%;
}

＆＃13;

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

2 个答案: