如何使图片垂直居中对齐

Question

我尝试在一个 div 中垂直对齐图像，但是我尝试的所有方法都不起作用。

我正在尝试将它居中在Material Design Lite单元格中。

以下是我的代码:

CodePen

HTML:

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col">
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
  </div>
  <div class="mdl-cell mdl-cell--4-col">
    <div class="imgholder">
    <img src="http://i.stack.imgur.com/kq8EX.png" id="stackimg">
    </div>
  </div>
</div>

CSS:

.mdl-cell{
  border: 1px solid black;
}
.imgholder{
  width: 100%;
  height:100%;
}
#stackimg{
  width:50%;
  float: right;
  position: reletive;
  top:50%;
  vertical-align: middle;
}

Vertical-align: middle无效。 top: 50%也无效。该图像具有定义高度的父div，因此我不确定为什么它不起作用。

非常感谢您的帮助。

- quantumbutterfly

---

它不会解决你的问题，但请注意你的拼写——是“relative”，而不是“reletive”。 - kinakuta

一个非常好的CSS居中指南，可以解决你所有的问题：https://css-tricks.com/centering-css-complete-guide/ - Remco van Os

要使用“top”，位置必须是固定或绝对的。 - Steven B.

@RemcovanOs 在发布之前已经看过了。这些方法都对我没用。请查看原帖中链接的Codepen。 - quantumbutterfly

@quantumbutterfly 我需要垂直居中：块级元素 - 高度未知（百分比视为未知） - 在 CodePen 中可行。 - Remco van Os

Answer 1

您可以使用 translateY() 来垂直居中您的图像。给您的容器设置 position: relative;，然后为您的图像分配 position: absolute; 和 transform: translateY(-50%);。

.imgholder{
  width: 100%;
  height: 100%;
  position: relative;
}

#stackimg{
  width: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

CodePen

- Hunter Turner

---

或者，如果您希望图像保持“position: relative”，请添加“left: 50%”和“transform”。 - Remco van Os

Answer 2

垂直对齐包含图像的 div 而不是 img 标签本身，或者检查这个：

> `http://jsfiddle.net/kizu/4RPFa/4570/`

- Bharthan

---

https://dev59.com/ymw05IYBdhLWcg3wYw1s - Bharthan

我已经看过并尝试了那个。那也不起作用。我怀疑 MDL 的 CSS 在某种程度上产生了干扰。 - quantumbutterfly