Question

我目前使用以下方式将图像置于水平方向：

.centeredImage
    {
    text-align:center;
    display:block;
    }

<!DOCTYPE html>
<html>

<head>
   <title>My Site</title>
   <link href="style.css" rel="stylesheet">

</head>

<body>

   <p class="centeredImage"><img id ="img" src="smallslide1.png"></p>

</body>
</html>

这样可以正常工作，但我也想垂直居中。不知道怎么办。我厌倦了将它包装在一个单独的div中

.centeredVert{
    vertical-align: middle }

}

但这没有做任何事情。有人可以给我一些关于如何做到这一点的指示吗？

Answer 1

您可以在图像上尝试绝对定位技巧：

.centeredImage img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

<p class="centeredImage">
    <img src="http://placehold.it/150x100">
</p>

Answer 2

试试这个：

#img{      
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) 
}

这里是jsfiddle。

如何使用div垂直居中图像？

2 个答案: