Kutuları ekranda ortalamanın değişik yollarını css kullanarak gerçekleştirebilirsiniz. Burada ise bootstrap kütüphanesine ait hazır sınıfları kullanarak gerekli işlemleri yapabilirsiniz. 

Öncelikle bize lazım olacak kutulara ait css tanımlamalarını yapalım.

        .small-box {
            max-width: 400px;
        }

        .dark-box {
            background-color: black;
            color: white;
        }

        .square-box {
            max-width: 600px;
            min-height: 600px;
            border: 1px solid #eee;
        }

Şimdi de kutuları ortalama yöntemlerini tanımlayalım.

    <h1 class="text-center">Merhaba</h1>

    <div class="container">
        <div class="small-box dark-box mx-auto text-center">small box / dark box</div>
    </div>

    <div class="d-flex justify-content-center">
        <div>box #1</div>
        <div>box #2</div>
    </div>

    <div class="container square-box d-flex justify-content-center align-items-center">
        <div>box #1</div>
        <div>box #2</div>
        <div>box #3</div>
    </div>