css - 在灵活的容器中居中图像

Question

我已经尝试了一段时间，试图让它工作，所以我设置了一个 CodePen，希望你们能提供帮助:

CODEPEN

我需要用百分比而不是静态像素宽度来指定 .container 的 height 和 width 以适合我的设计并保持它所有流畅且 react 灵敏。

在笔中删除在 .container 上设置的像素尺寸，您会看到发生了什么。

有没有办法做到这一点？

Answer 1

对于现代浏览器，您可以使用绝对定位和transform 来定位图像

.container
  width: 50% 
  height: 50%

  background-color: #ebebeb
  position: relative

img
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%, -50%)

演示在 http://codepen.io/gpetrioli/pen/KnHod