How to align divs horizontally with html?

How to align divs horizontally with html?

I need to do a toolbar that consists of a Left-arrow button, a set of
image buttons then a Right-arrow button
My requirements are:
the toolbar needs to be on one row
the toolbar needs to be centered horizontally
the set can have many image buttons (N is unknown)
when the window is too small in width the middle div should hide the image
buttons that don't fit
To center everything horizontally I found this to work well on chrome:
<div style="display:-webkit-box; -webkit-box-pack:center;
-webkit-box-align:center;" class="toolbar">
<button>LEFT</button>
<div style="overflow:hidden;">
<button style="height:72px">1</button>
<button style="height:72px">2</button>
<button style="height:72px">3</button>
<button style="height:72px">4</button>
<button style="height:72px">5</button>
<button style="height:72px">6</button>
<button style="height:72px">7</button>
<button style="height:72px">8</button>
<button style="height:72px">9</button>
</div>
<button>RIGHT</button>
</div>
But unfortunately the box parameters breaks the overflow:hidden style that
is necessary if the middle set becomes too big to fit everything.
So is there another way of centering everything horizontally ?