css horizontal center images without using % percent - html

Question

There are some extra space on the right side in my gallery...
My images' container:
.my-gallery figure {
display: block;
float: left;
width: 150px;
}
Is it possible make images always horizontal center in different sized screen without using % percent value? Or someone has a genius idea that makes extra space not so weird?
Or % percent value trick is the only way?
In screen A:
In screen B:
.my-gallery {
width: 100%;
float: left;
}
.my-gallery img {
width: 100%;
height: 112px;
}
.my-gallery figure {
display: block;
float: left;
margin: 0 5px 5px 0;
width: 150px;
}
.my-gallery figcaption {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-height: 26px;
}
.my-gallery img {
max-width: 100%;
}
<div class="my-gallery">
<figure>
<a href="big1.jpg">
<img src="http://placehold.it/112x150" alt="1" />
</a>
<figcaption>111111111111111111111111</figcaption>
</figure>
<figure>
<a href="big2.jpg">
<img src="http://placehold.it/112x150" alt="2" />
</a>
<figcaption>222222222222222222222222</figcaption>
</figure>
<figure>
<a href="big3.jpg">
<img src="http://placehold.it/112x150" alt="3" />
</a>
<figcaption>3333333333333333333333333333333</figcaption>
</figure>
<figure>
<a href="big4.jpg">
<img src="http://placehold.it/112x150" alt="4" />
</a>
<figcaption>444444444444444444444444</figcaption>
</figure>
...
</div>

Answer 1

If using % is a problem, you could use css flexbox to get this done.
https://jsfiddle.net/76dybc3p/1/
Change css of .my-gallery and remove the float in figure
.my-gallery {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.my-gallery figure {
display: block;
margin: 0 5px 5px 0;
width: 150px;
}

Answer 2

The most practical approach is to use #media query
I also changed the .my-gallery rule to
.my-gallery {
margin: 0 auto
}
Sample snippet
.my-gallery {
margin: 0 auto
}
.my-gallery img {
width: 100%;
height: 112px;
}
.my-gallery figure {
display: block;
float: left;
margin: 0 5px 5px 0;
width: 150px;
}
.my-gallery figcaption {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-height: 26px;
}
.my-gallery img {
max-width: 100%;
}
#media screen and (min-width: 310px) {
.my-gallery {
width: 310px;
}
}
#media screen and (min-width: 465px) {
.my-gallery {
width: 465px;
}
}
#media screen and (min-width: 620px) {
.my-gallery {
width: 620px;
}
}
<div class="my-gallery">
<figure>
<a href="big1.jpg">
<img src="http://placehold.it/112x150" alt="1" />
</a>
<figcaption>111111111111111111111111</figcaption>
</figure>
<figure>
<a href="big2.jpg">
<img src="http://placehold.it/112x150" alt="2" />
</a>
<figcaption>222222222222222222222222</figcaption>
</figure>
<figure>
<a href="big3.jpg">
<img src="http://placehold.it/112x150" alt="3" />
</a>
<figcaption>3333333333333333333333333333333</figcaption>
</figure>
<figure>
<a href="big4.jpg">
<img src="http://placehold.it/112x150" alt="4" />
</a>
<figcaption>444444444444444444444444</figcaption>
</figure>
</div>

Answer 3

I have no idea why you wouldn't use %, but this is another alternative: use a table to scaffold your items and set the property table-layout: fixed;
HTML
<table>
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
</table>
CSS
table{
table-layout: fixed;
}