如何将图片垂直和水平居中？

Question

我有一个宽度和高度可变的盒子。 在我的例子中，我想将图片放在盒子的中间位置。 用CSS解决这个问题的最佳方法是什么？ 如果我不需要，我宁愿不使用任何JavaScript。

示例： http ： //codepen.io/wesbos/pen/Ehour

我的HTML：

<div class="box">
  <img src="http://placekitten.com/200/200">
</div>

我的CSS：

.box {
  width:400px;
  height:400px;
  border:1px solid red;
  text-align:center;
}

Answer 1

您可以将DIV设为table-cell ，然后使用vertical-align属性：

.box {
  width:400px;
  height:400px;
  border:1px solid red;
  text-align:center;
  vertical-align:middle;    
  display: table-cell;
}

img{
  display: inline-block;
}

Answer 2

最简单的方法是将图像作为div的背景居中并且具有无重复值，而无需使用text-align属性，以下是：

HTML

<div class="box">
</div>

CSS

.box {
  width:400px;
  height:400px;
  border:1px solid red;
  background:url(http://placekitten.com/200/200) no-repeat center center;
}

您可以将url（）中的链接替换为本地计算机上所需的图像或Web服务器上的图像链接（如上所示）