css - 如何使用 CSS 响应式垂直对齐图像

Question

我正在尝试响应式地在页面上垂直居中图像。我在网上找到了几个解决方案，但没有一个对我有用。图像卡在左上角。任何线索都会很棒。我在敲我的头:)

Here is the test page

here is an image of the desired finished page

    html {

      font-family: sans-serif;

      /* 1 */

      -ms-text-size-adjust: 100%;

      /* 2 */

      -webkit-text-size-adjust: 100%;

      /* 2 */

      background: url("http://mccanney.net/mbhb/images/bg-giraffe.jpg") no-repeat center center fixed;

      -webkit-background-size: cover;

      -moz-background-size: cover;

      -o-background-size: cover;

      background-size: cover;

    }

    img.product1:empty {

      top: 50%;

      left: 50%;

      -webkit-transform: translate(-50%, -50%);

      -moz-transform: translate(-50%, -50%);

      -ms-transform: translate(-50%, -50%);

      -o-transform: translate(-50%, -50%);

      transform: translate(-50%, -50%);

    }

<div>
  <img src="http://mccanney.net/mbhb/images/product-lg-hippo.jpg" class="product1" />
</div>

Answer 1

display:table 在 IE8 下工作正常 ...

html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  background: url("http://mccanney.net/mbhb/images/bg-giraffe.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
html {
  height: 100%;
  width: 100%;
  display: table;
}
body {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
img.product1:empty {
  /* not too sure what's your idea here , a background defaut, a div sized, generated content inserted  ? */
}

<div>
  <img src="http://mccanney.net/mbhb/images/product-lg-hippo.jpg" class="product1" />
</div>

小弟的简单方法:display:flex;

html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  background: url("http://mccanney.net/mbhb/images/bg-giraffe.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
html {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
img.product1:empty {
  /* not too sure what's your idea here , a background defaut, a div sized, generated content inserted  ? */
}

<div>
  <img src="http://mccanney.net/mbhb/images/product-lg-hippo.jpg" class="product1" />
</div>