居中相对大小的图像

Question

我有一个正方形图像，我希望它位于屏幕的中央。问题是我希望图像保持正方形，同时不超过宽度和高度的 80%。我使用了以下代码，它使我的图像成为高度的 80%（当高度 < 宽度时），并使图像垂直居中，当然不是水平居中。当使用固定宽度时，我可以使用 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%)
}

这是一个fiddle： http://jsfiddle.net/l0wskilled/voubtxrt/

Answer 2

您也可以试试：

<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/

Answer 3

如果您的图像有 display: block，那么您可能可以使用 margin: auto auto 并删除 % 边距。如果它的 display 是 inline 或 inline-block，你可以在图像的父元素上使用 text-align: center 使其水平居中。我没有测试过这段代码。如果这不起作用，并且你对 jQuery 没有问题，这可以用几行 jQuery.

来完成

居中相对大小的图像

Centering a relative sized image

css

centering