Group images that contains image overlay to the centre of the page - html

Question

I am trying to center a group (a table with 3x3) of pictures to the center of the webpage, I manage to do it before adding image overlay to it. But since I added image overlay, the images are appearing on top left of the webpage. How do i group them and center them, also how am I supposed to get the image location so that when I set the image overlay, it goes to the specific picture as each picture will have different image overlay text.
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

You could center it using flexbox. Change your main div
<div style="text-align-center;">
......
</div>
to
<div style="display: flex; flex-direction: column;align-items: center;">
.....
</div>
And it should work.
.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.