index.html

<!DOCTYPE html>
<html>
<head>
    <title>Demo jquery center block</title>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
    <script type="text/javascript" src='./dist/jquery-center-inline-block.js'></script>
    <style type="text/css">
    
        .container{
            margin: 0 100px;
            text-align: center;
        }

        .container .inline-box{
            text-align: center;
            display: inline-block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            color: white;
            margin: 20px;
            background-color: red;
        }
        
        .container2 .inline-box{
            background-color: purple;
        }
        
        .container3 .inline-box{
            background-color: gray;
        }
        
    </style>
</head>
<body>
    
<div class='container container1'></div>

<div class='container container2'></div>

<div class='container container3'>
    <h2 class="header">Child by class</h2>
</div>

<div class='container container4'>
    <h2 class="header">Child by selector</h2>
</div>

<div class='container container5'>
    <h2 class="header">Empty child</h2>
</div>


<script type="text/javascript">

    var $containers = $(".container").not('.container5');
    
    for(var i = 1; i <= 20; i++){
        $('<div class="inline-box"></div>').html(i).appendTo($containers);
    }
    
    $(".container2").centerInlineBlock();
    
    $(".container3").centerInlineBlock({
        targetChildClass: 'inline-box'
    });
       
    $(".container4").centerInlineBlock({
        targetChildSelector: '.inline-box'
    });
    
    $(".container5").centerInlineBlock({
        'minChildWidth': $('.inline-box').outerWidth(true),
        targetChildClass: 'inline-box'
    });

 
</script>
</body>
</html>