Welcome

A demonstration of using Bootstrap 4 to center text or element horizontally and vertically

Align element horizontally and vertically

            <div class="d-flex h-100">
                <div class="d-flex w-100 justify-content-center align-items-center">
                    <div style="height:100px; background-color:red; width:100px;"></div>
                </div>
            </div>

Align text horizontally and vertically

            <div class="d-flex h-100">
                <div class="d-flex w-100 justify-content-center align-self-center">
                I'm in the middle
                </div>
            </div>

I'm in the middle

Align text horizontally and vertically in the whole page view

            <div class="vh-100 d-flex justify-content-center align-items-center">
                <h4 class="text-danger">Centered horizontally and vertically!</h1>
            </div>