Multiple DIV center technique

I always have a hard time finding CSS specific to my neeeds. Below is an example that will center n-amount of DIVs:

<style type="text/css">
    body {
        font-family: Verdana,Arial;
        font-size: 12px;
        letter-spacing: -0.04em;
    }
        
    #product-list-outer-container {
        background-color: #F7F4EF;
        position: relative;
        width: 100%;
        height: 75px;
    }
        
    #product-list-container {
        position: absolute;
        left: 50%;
    }
        
    #product-list-inner-container {
        position: relative;
        left: -50%;
        width: 245px;
        height: 75px;
    }
        
    .product {
        background-color: #EEE6DC;
        float: left;
        margin: 5px 5px;
        padding: 5px 5px;
    }
</style>

<div id="product-list-outer-container">
    <div id="product-list-container">
        <div id="product-list-inner-container">
            <div class="product">Shoes</div>
            <div class="product">Jacket</div>
            <div class="product">Socks</div>
            <div class="product">Hat</div>
        </div>
    </div>
</div>