html - 如何将这张图片垂直和水平居中？

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 atable-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 服务器上的图像链接，如上面的那个