如何使图像在 div 中间居中？ [复制]答案

【问题标题】：How to center an image in the middle of a div? [duplicate]如何使图像在 div 中间居中？ [复制]
【发布时间】：2017-11-13 23:41:08
【问题描述】：

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

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

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

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

【问题讨论】：

如果你只是用谷歌搜索的话，有很多不同的方法可以做到这一点
请阅读：how to ask a good question - 最重要的一行：搜索和研究...对该站点的简单搜索会发现数百个类似问题。下次提问前请努力一点
天哪，这是本网站上被问及回答最多的问题。

标签： html css position vertical-alignment

【解决方案1】：

如果你可以将图像作为背景给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}

【讨论】：

请不要这样做，因为您会将内容与布局混淆。
这是一个简单的练习，它在 flexbox 或任何其他方法出现之前就被使用过。相信我，如果你以某种方式获得图像链接，那么在样式或 html 中加载它并没有什么不同。如果您真的不愿意看到完全独立的布局，我更新了我的答案，您可以查看它。
绝对定位+变换是比添加图像作为背景更好的方法。 Flexbox 也是一种选择，但并不总是最好的。只是避免将内容与布局混合。

【解决方案2】：

要将您的 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>

【讨论】：

【解决方案3】：

最干净的解决方案是让您的 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)

【讨论】：

仅适用于 Chrome。
真的吗？张贴的小提琴在 MS Edge (RIP) 和 Firefox 上运行良好。想知道更多信息！ :)

【解决方案4】：

简单易行的方法，

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

【讨论】：

【解决方案5】：

你可以使用display: flex;

DEMO

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

.test img {
  align-self: center;
}

【讨论】：

为什么不在弹性容器上使用align-items
@Huangism 没有具体原因我想只是展示它也可以这样做。
仅适用于 Chrome。
@EnexoOnoma 这是经过实战考验的，所以它可以工作（浏览器支持 flex）。您的代码必须有其他内容。把你的问题发一个帖子，你可以ping我，如果你喜欢我可以看看:)

【解决方案6】：

你可以使用最简单的方式-> display: 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>

【讨论】：