html - 内联 CSS 居中不起作用

Question

我正在使用this awesome site作为内联 CSS 居中的指南，我很困惑为什么其中大部分不起作用。较新的 flexbox 样式仅水平居中，而不是垂直居中:

<div style="display:flex;justify-content:center;align-items:center;">
  <img src="https://66.media.tumblr.com/bac96f9db0dd31f09bad7f05db7e13c4/tumblr_o74utbKePP1u5sqevo1_500.gif"></img>
</div>

而 IE 的旧版本根本无法运行:

<div style="display:table;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="margin-left:auto;margin-right:auto;">
      <img src="https://66.media.tumblr.com/bac96f9db0dd31f09bad7f05db7e13c4/tumblr_o74utbKePP1u5sqevo1_500.gif"></img>
    </div>
  </div>
</div>

有什么想法吗？仅供引用，示例图像包含《黑色孤儿》剧透:)

Answer 1

• 与 flexbox您需要设置height

注意

<img>是一个自关闭标签，因此您不需要执行 </img>而是 />

---

body {
  margin: 0
}
div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh
}

<div>
  <img src="https://66.media.tumblr.com/bac96f9db0dd31f09bad7f05db7e13c4/tumblr_o74utbKePP1u5sqevo1_500.gif" />
</div>

• 关于CSS tables您需要设置height为了vertical-align:middle工作，并添加 display:block , margin:auto至img使其水平居中

body {
  margin: 0
}
div:first-of-type {
  display: table;
  width: 100vw;
  height: 100vh
}
div:last-of-type {
  display: table-cell;
  vertical-align: middle
}
img {
  display: block;
  margin: auto
}

<div>
  <div>
    <img src="https://66.media.tumblr.com/bac96f9db0dd31f09bad7f05db7e13c4/tumblr_o74utbKePP1u5sqevo1_500.gif" />
  </div>
</div>