如何将两个图像水平和垂直居中？答案

【问题标题】：How to horizontally and vertically center two images on top of each other?如何将两个图像水平和垂直居中？
【发布时间】：2017-03-06 16:29:58
【问题描述】：

我正在尝试将两个图像放在彼此的顶部，两个图像在其容器内水平和垂直居中。

其中一张图片将设置不透明度动画以显示下方的图片。

图像大小相同，但我事先不知道图像的大小。我也想用纯 CSS 和 HTML 来做这件事。

这就是我最终的结果。

.data-box{
  border: 2px solid #d4d4d4;
  border-radius: 3px;
  display: flex;
  height: 120px;
  margin: 5px;
  margin-bottom: 10px;
  margin-right: 10px;
  padding: 0;
  position: relative;
  width: 120px;
}

.logo {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: auto;
  position: relative;
}

.data-name {
  position: absolute;
  width: 100%;
  height: 23px;
  bottom: 0px;
  right: 0px;
  background: rgba(200, 200, 200, 0.3);
}

span {
  position: absolute;
  width: 100%;
  bottom: 2px;
  text-align: center;
}

img {
  position: absolute;
}

<div class="data-box">
  <div class="logo">
    <img class="grayscale-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
    <img class="color-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
  </div>
  <div class="data-name"><span>Flickr</span></div>
</div>

我制作了position: absolute 的图像，这样它们就可以离开浏览器的正常流程并直接在彼此之上而不是彼此相邻呈现。

这在 Chrome 中可以正常工作，但在 Firefox 和 Safari 中，图像的左上角水平和垂直居中：

我怎样才能使这些图像水平和垂直居中，同时仍然让它们直接在彼此之上渲染？

【问题讨论】：

标签： html css flexbox css-position

【解决方案1】：

解决方案

将此添加到您的代码中：

img {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

.data-box {
  border: 2px solid #d4d4d4;
  border-radius: 3px;
  display: flex;
  height: 120px;
  margin: 5px;
  margin-bottom: 10px;
  margin-right: 10px;
  padding: 0;
  position: relative;
  width: 120px;
}
.logo {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: auto;
  position: relative;
}
.data-name {
  position: absolute;
  width: 100%;
  height: 23px;
  bottom: 0px;
  right: 0px;
  background: rgba(200, 200, 200, 0.3);
}
span {
  position: absolute;
  width: 100%;
  bottom: 2px;
  text-align: center;
}
img {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

<div class="data-box">
  <div class="logo">
    <img class="grayscale-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
    <img class="color-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
  </div>
  <div class="data-name"><span>Flickr</span>
  </div>
</div>

说明

虽然将元素设置为position: absolute 会将其从正常流程中移除，但实际上并未将其定位到任何位置。

CSS 偏移属性（top、bottom、left 和 right）的初始值为 auto，这会将绝对定位的元素保持在它通常位于文档中的位置流动。如您所见，当未定义偏移量时，浏览器行为会有所不同。

有关上述代码如何工作的说明，请参阅此帖子：Element will not stay centered, especially when re-sizing screen

【讨论】：

【解决方案2】：

我认为你根本不需要 flexbox：

.data-box {position:relative; display:inline-block;}
.logo {position:relative;}
.color-image {position:absolute; top:0; left:0; bottom:0; right:0; opacity:0.5;}
.data-name {position:absolute; left:0; right:0; bottom:5px; text-align:center;}

<div class="data-box">
  <div class="logo">
    <img class="grayscale-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
    <img class="color-image" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
  </div>
  <div class="data-name"><span>Flickr</span></div>
</div>

【讨论】：

这取决于您的初始规范，即两个图像的大小相同。

【解决方案3】：

你能把img设置在一个div里，把后面的图片设置为这个div的背景吗？

【讨论】：

【解决方案4】：

这不是最优雅的解决方案，但可行：

img {
  position: absolute;
  transform: translate(-50%, -50%);
}

【讨论】：

【解决方案5】：

我会尽量直截了当。这是一个将两个图像集中在父对象中的示例。

<html>
<head>
<title>Exemple</title>

<style type="text/css">
	.parent{
		margin: auto auto;
		width: 500px;
		height: 500px;
		border: 3px solid #ccc;
	}

	.child1, .child2{
		width: 50%;
		height: 50%;
		margin: 25%;
		background-color: rgb(226,26,60);
	}

   .child1{
       opacity:0.5;
   }
</style>

</head>

<body>
<div class="parent">
<img class="child1" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
<img class="child2" src="https://placeholdit.imgix.net/~text?txtsize=8&txt=65%C3%9765&w=65&h=65" alt="">
</div>
</body>


</html>

使用带百分比的边距使两个图像在中间对齐父分区这里我将 with 和 height 设置为 50%，这意味着有还剩 50%。这就是为什么你把边距设置为 25%，所以他把它放在父级的中间。

祝你好运

【讨论】：