将 link 垂直居中到 div 中的图像

Question

我想在 'left' div.

中将图像（也是 link）垂直居中

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的width/height是不知道的

注意 2：为了不造成混淆，我已经删除了所有以上述代码为中心的尝试:-)

注意 3：我已经测试了很多在网上找到的东西，但其中 none 对我有效。

Answer 1

你可以使用这个：

.left{
    display: flex;
    align-items: center;
}

Answer 2

您可以将 .left 中的 link 与现有的 markup/css 垂直居中，方法是将 .left 中的 link 绝对定位在 top: 50% ，然后使用 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>

将 link 垂直居中到 div 中的图像

vertically center a link to an image in a div

html

css

centering