Question

我有一个方形图像，我希望在屏幕上居中。问题是我希望图像保持正方形，同时不超过宽度和高度的80％。我使用了下面的代码，它使我的图像高度为80％（高度＆lt;宽度），并使图像垂直居中，但当然不是水平居中。当使用固定宽度时，我可以使用margin-left：50％; margin-right：50％，但是相对大小，这会将图像的左侧设置为50％。有什么想法吗？

.my_img{
  max-width: 80%;
  max-height: 80%;
  margin-left: 10%;
  margin-top: 10%;
}

Answer 1

试试这个：

.my_img_container {
    position: relative;
}
.my_img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

这是一个小提琴： http://jsfiddle.net/l0wskilled/voubtxrt/

Answer 2

如果您的图片有display: block，那么您可以使用margin: auto auto并删除％边距。如果display为inline或inline-block，则可以在图片的父元素上使用text-align: center使其水平居中。我还没有测试过这段代码。如果这不起作用，并且您对jQuery没有任何问题，可以使用几行jQuery来完成。

Answer 3

您也可以尝试：

<div class="container">
   <img src="https://www.webkit.org/blog-files/acid3-100.png" class="my_img" />
</div>

风格：

.my_img {
   max-width: 80%;
   max-height: 80%;
   margin-left: auto;
   margin-right: auto;
   display: block;
}

我认为无论如何这都是你想要的，也许我错了！ https://jsfiddle.net/dLozvcmo/2/

将相对大小的图像居中

3 个答案: