如何响应，垂直对齐图像与CSS

Question

我正在努力回应＆amp;垂直居中于页面上的图像。我在网上找到了几个解决方案，但没有一个适合我。图像卡在左上角。任何线索都会很棒。我砰的一声：）

Here is the test page

here is an image of the desired finished page

＆＃13;

＆＃13;

    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%);

    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要对div中的图像使用position:absolute。见下文：

html {
    font-family: sans-serif;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    background: url("../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%;
    position: absolute; /*You would need to add this*/
    width: auto;
    -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://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" class="product1" />
</div>

Answer 2

显示：表格从IE8开始工作正常......

    var options = {
    quality: 50,
    destinationType: Camera.DestinationType.FILE_URI,
    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
    mediaType:Camera.MediaType.VIDEO
  };

  $cordovaCamera.getPicture(options).then( ...

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  ? */
}

与弟弟轻松相处：display：flex;

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

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  ? */
}

Answer 3

几乎就在那里！您可以在top课程中设置left和product1的水平和垂直位置。然后，它要么绝对定位到视口，要么相对定位到父div。

在CodePen中查看。

HTML：

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

CSS：

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

img.product1:empty {
  position: absolute;
  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%);
}