Cannot Align Vertically? display:flex To The Rescue

Sometimes it might be challenging to vertically centered an element within your web page design. Well, display:flex is a very easy way for you to achieve that goal.

 

Here is the HTML code:

<section class="container-fluid my-block">
    <div class="wrapper">
        <h1>Add your code here</h1>
    </div>
</section>

 

CSS Code:

.my-block {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    align-content: center;
    height : 300px;
    background-color: #ddd;
    }
.my-block .wrapper {
    width: 100%;
    }
.my-block .wrapper h1 {
    text-align: center;
    width: 100%; 
    }