Question

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

我的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服务器上的图像链接替换为上面的图像

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

2 个答案: