html - 将包含图像叠加层的图像分组到页面中心

Question

我试图将一组(一张 3x3 的表格)图片居中放置在网页的中心，我设法在向其添加图像叠加层之前做到这一点。但是由于我添加了图像叠加层，图像出现在网页的左上角。我如何将它们分组并居中，以及我应该如何获取图像位置，以便在我设置图像覆盖时，它会转到特定图片，因为每张图片都有不同的图像覆盖文本。

CSS

.container {
   position: relative;
   width: 100px;
   height: 100px;
}

.image {
   display: block;
   width: 100px;
   height: 100px;
 }

 .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;

 }

 .container:hover .overlay {
      opacity: 1;
 }

.text {
   color: red;
   font-size: 20px;
   font-weight: bold;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
 }

HTML

<div style="text-align:center">
 <div class="container">
 <img src="wheel1.jpg" class="image">
    <div class="overlay">
        <div class="text">Hello World</div>
    </div>
</div>
<div class="container">
<img src="wheels2.jpg" class="image">
    <div class="overlay">
        <div class="text">Hello World</div>
    </div>
</div>
<div class="container">
<img src="wheel3.jpg" class="image"">
    <div class="overlay">
        <div class="text">Hello World</div>
    </div>
</div>

`

Answer 1

您可以使用 flexbox 将其居中。更改主 div

<div style="text-align-center;">
     ......
</div>

到

<div style="display: flex; flex-direction: column;align-items: center;">
    .....
</div>

它应该可以工作。

.wrapper{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.container {
   position: relative;
   width: 100px;
   height: 100px;
}

.image {
   display: block;
   width: 100px;
   height: 100px;
   border: 1px solid red;
 }

 .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;

 }

 .container:hover .overlay {
      opacity: 1;
 }

.text {
   color: red;
   font-size: 20px;
   font-weight: bold;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
 }

<div class="wrapper">
   <div class="container">
   <div class="image"></div>
      <div class="overlay">
          <div class="text">Hello World</div>
      </div>
    </div>
  <div class="container">
  <div class="image"></div>
      <div class="overlay">
          <div class="text">Hello World</div>
      </div>
  </div>
  <div class="container">
  <div class="image"></div>
      <div class="overlay">
          <div class="text">Hello World</div>
      </div>
  </div>
  </div>

Here is the fiddle.