如何将图像居中放置在 div 中间？

Question

我需要将图像居中放置在 div。

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

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

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

Answer 1

你可以用最简单的方式->显示：table-cell；这允许您使用垂直对齐属性

.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 2

您可以使用 display: flex;

DEMO

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

.test img {
  align-self: center;
}

Answer 3

简单易行的方法，

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

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

Answer 4

最简洁的解决方案是让您的 div display:flex 和 align/justify 内容居中。

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

您更新后的 Fiddle：https://jsfiddle.net/y9j21ocr/1/

More reads on flexbox (recommended)

Answer 5

如果你能给图片做背景就很简单了 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}

Answer 6

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

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

到您的图片，它会垂直居中。

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

.test>img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

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

如何将图像居中放置在 div 中间？

How to center an image in the middle of a div?

html

css

position

vertical-alignment