我想在"左"div内垂直居中图像(这也是一个链接(。
a {
outline: 0;
}
.main {
background: red;
position: relative;
display: inline-block;
width: 400px;
height: 200px;
}
.left {
position: absolute;
width: 20%;
height: 100%;
}<body>
<div class="main">
<div class="left">
<a href="left.png">
<img src="left.png">
</a>
</div>
</div>
</body>注1：在我的真实页面中，.main的宽度/高度是未知的。
注意2：我已经删除了在上述代码中居中的所有尝试，以免增加混乱：-(
注意3：我已经测试了网络上找到的许多东西，但没有一个在我的情况下有效。
你可以使用这个：
.left{
display: flex;
align-items: center;
}
您可以通过将链接绝对定位在 .left top: 50% 内，将.left链接与现有标记/css 垂直居中，然后使用 translateY(-50%) 将其向上移动其自身高度的 50%，使其真正垂直居中。
.left a {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
a{
outline:0;
}
.main{
background:red;
position:relative;
display:inline-block;
width:400px;
height:200px;
}
.left {
position:absolute;
width:20%;
height:100%;
}
.left a {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
img {
max-width: 50px;
}<body>
<div class="main">
<div class="left">
<a href="left.png">
<img src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg">
</a>
</div>
</div>
</body>