在灵活的容器中居中图像答案

【问题标题】：Centering images within a flexible container在灵活的容器中居中图像
【发布时间】：2013-12-31 01:41:40
【问题描述】：

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

CODEPEN

我需要用百分比而不是静态像素宽度来指定 .container 的 height 和 width，以适应我的设计并保持流畅和响应。

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

有没有办法做到这一点？

【问题讨论】：

标签： css image percentage centering

【解决方案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的演示

【讨论】：

请记住，您必须在需要的地方添加供应商前缀。我只发布了 transform 的标准语法
完美！我确实尝试使用负的左边距和上边距，但它使用父级的百分比尺寸，因此转换适用于元素本身的尺寸，这很好听。我正在使用 Compass，所以有前缀。我确实需要 IE8 支持，所以将在 javascript 中添加最后一个。再次感谢！

【解决方案2】：

希望对兄弟有帮助。检查一下，我是用background-image 做的。

JSFiddle

玩得开心>:D

【讨论】：

哦，好吧，那么你可以将图像添加到你的 div 并找到它（：