Question

我需要将图像置于div的中间。

<div class="main">
    <img...>
</div>

在下面的示例中，图像居中，但不在中间。

https://jsfiddle.net/web_garaux/tng7db0k/

Answer 1

简单易行的方法，

＆＃13;

.test {
  background-color: orange;
  width: 700px;
  height: 700px;
  display:flex;
  align-items:center;
  justify-content:center;
}

＆＃13;

<div class="test">
<img src="http://via.placeholder.com/350x150">
</div>

＆＃13;

Answer 2

要垂直居中您的div，您可以使用positioning。只需申请

position: relative;
top: 50%;
transform: translateY(-50%);

到你的图像，它将垂直居中。

＆＃13;

.test {
  background-color: orange;
  width: 700px;
  height: 700px;
  text-align: center;
}

.test>img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

＆＃13;

<div class="test">
  <img src="http://via.placeholder.com/350x150">
</div>

＆＃13;

Answer 3

您可以使用最简单的方式 - ＆gt;显示：table-cell;允许您使用vertical-align属性

.test {
  background-color: orange;
  width: 500px;
  height: 300px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

<div class="test">
<img src="http://via.placeholder.com/350x150">
</div>

Answer 4

您可以使用display: flex;

DEMO

.test {
  display: flex;
  justify-content: center;
  background-color: orange;
  width: 700px;
  height: 700px;
}

.test img {
  align-self: center;
}

Answer 5

最干净的解决方案是将您的div display:flex和对齐/对齐内容放在中心位置。

.test {
  background-color: orange;
  width: 700px;
  height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
}

您更新的小提琴：https://jsfiddle.net/y9j21ocr/1/

More reads on flexbox (recommended)

Answer 6

如果您可以将图像作为div的背景

，那真的很容易

.test {
  background-color: orange;
  width: 700px;
  height: 700px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center center;
}

<div class="test" style="background-image:url(http://via.placeholder.com/350x150);">
</div>

如果您不想使用内联样式，可以执行

<div class="test">
  <img src="http://via.placeholder.com/350x150">
</div>

.test > img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.test{position: relative}

如何将图像置于div中间？

6 个答案: