如何在固定div内垂直放置图像[重复]

Question

此问题已经在这里有了答案：

How to vertically center a div for all browsers?（45个答案）

Flexbox: center horizontally and vertically（11个答案）

How to center absolutely positioned element in div?（33个答案）

How to vertically align an image inside a div（35个答案）

关闭7分钟前。

我正在尝试将此图像在固定位置divs内垂直居中，但似乎无法正常工作。我还阅读了其他问题，发现的答案不适用于我需要的固定位置。我想念什么？谢谢！

[JSFiddle：https://jsfiddle.net/fudt38j4/

<div id="container">
<div id="logocontainer">    
<a href="/"> <img src="images/logo.svg" alt="Logo." /> </a>
</div>      
</div>  

#container {
    background-color: black;
    z-index: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

#logocontainer {
    position: fixed;
    margin: 0 auto;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#logocontainer img {
    width: 100%;
}

Answer 1

您可以仅将display: inline-block中的#logocontainer替换为display: flex

#container {
    background-color: black;
    z-index: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

#logocontainer {
    position: fixed;
    margin: 0 auto;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#logocontainer a{
   width: 100%;
   height: 50%;
   overflow: hidden;
}

#logocontainer img {
    width: 100%;
    height: 100%;
}

<div id="container">
<div id="logocontainer">    
<a href="/"> <img src="https://cdn.vox-cdn.com/thumbor/0n6dqQfk9MuOBSiM39Pog2Bw39Y=/1400x1400/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/19341372/microsoftedgenewlogo.jpg" alt="Logo." /> </a>
</div>      
</div>  

Answer 2

您可以使用top和平移它来移动它：

#logocontainer img {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

这里是工作的小提琴：https://jsfiddle.net/ospe930d/