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>

任何想法是什么问题？仅供参考，示例图片包含Orphan Black剧透：）

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>

Answer 2

这是工人。您所要做的就是指定父div的高度。假设100％视口高度，您必须将其设置为100vh。

代码示例

<div style="display:flex;justify-content:center;align-items:center;height: 100vh;
">

Answer 3

div包含图像尺寸本身到图像高度，因此垂直居中无关紧要。将div显式高度设置为大于图像高度，Flexbox版本可以正常工作。不确定后备。

像这样： <div style="display:flex;justify-content:center;align-items:center;height:800px;">

见这里：http://codepen.io/SteveClason/pen/GZaoZZ

内联CSS中心不起作用

3 个答案:

注意