css - 居中相对大小的图像

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/