如何响应，与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

您将需要在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 ...

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>

与弟弟简单的办法：显示：弯曲;

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>

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