Question

我将不同的图像封装在方形样式的块中，我希望始终将它们居中放置，但是我花了很长时间试图使它们这样做。

我举例说明了类似设计中发生的事情。请注意，产品（烧烤架）实际上并未位于imgblock容器的中心。

对于其他比宽窄得多的产品图像，这开始变得很明显。

.imgBlock {
  width:100px;
  height:100px;
  border:2px solid black;
  margin:1px;
  padding:4px;
}

.imgBlock img{
  max-height:100%;
  max-width:100%;
  margin:auto;
  display:block;
}

<div class="container">
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
  </div>
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
  </div>
</div>

Answer 1

首先将图像设置为全宽和全高（或根据需要）。现在，您可以添加object-fit: contain以将图像包含到imgBlock中，然后使用object-position: center对其进行对齐-请参见下面的演示

.imgBlock {
  width:100px;
  height:100px;
  border:2px solid black;
  margin:1px;
  padding:4px;
}

.imgBlock img{
  height:100%; /* set full height */
  width:100%; /* set full width */
  display:block;
  object-fit: contain; /* constrains the image maintaining aspect ratio */
  object-position: center; /* default position is center - so optional in this case */
}

<div class="container">
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
  </div>
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
  </div>
</div>

Answer 2

您可以使用较旧的定位属性以及Flex技术。使主块位置相对。然后将该块内的img设置为position：absolute。将该块元素放在顶部：左侧50％：父元素的50％。由于它位于左上角，因此将稍微居中。然后，我们将使用transform：translate（-50％，-50％）将其带回到真实中心。

有关MSDN上position的更多信息。

.imgBlock {
  position: relative;
  width:100px;
  height:100px;
  border:2px solid black;
  margin:1px;
  padding:4px;
}

.imgBlock img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height:100%;
  max-width:100%;
  display:block;
}

<div class="container">
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
  </div>
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
  </div>
</div>

Answer 3

您可以在display: flex上添加imgBlock，然后在justify-content处水平居中，在align-items处垂直居中。

.imgBlock {
  display: flex;
  align-items: center;
  justify-content: center;

  width:100px;
  height:100px;
  border:2px solid black;
  margin:1px;
  padding:4px;
}

.imgBlock img{
  max-height:100%;
  max-width:100%;
  margin:auto;
  display:block;
}

<div class="container">
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
  </div>
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
  </div>
</div>

Answer 4

您可以设置相对于div .imgBlock的位置。之后，将绝对位置设置为<img/>，所有坐标都设置为0，边距自动设置。

请记住，绝对位置是指位置相对最近的父级。

.imgBlock {
  width:100px;
  height:100px;
  border:2px solid black;
  margin:1px;
  padding:4px;
  position:relative;
}

.imgBlock img{
  max-height:100%;
  max-width:100%;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div class="container">
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/WG-logo-short-black.png?43066">
  </div>
  <div class="imgBlock">
    <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/M1-Grill-FAQ.jpg?43066">
  </div>
</div>

以相同的块大小将不同大小的图像居中

4 个答案: