<分区>
<分区>
我试图在固定位置 div 中将此图像垂直居中，但我似乎无法让它工作。我已经阅读了其他问题，我发现的答案不适用于我需要的固定位置。我错过了什么？谢谢!
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%;
}
最佳答案
你可以将 #logocontainer 中的 display: inline-block 替换为 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> 关于html - 如何在固定的 div 中垂直居中图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59554166/