How to center vertically and horizontally a heading text using flask-bootstrap
<p>How can I bring a heading text in the middle of a page? I'm using flask-bootstrap and I would like to customize it with my own CSS style.</p>

<p>Here's my sample code:</p>

<p><strong>HTML</strong></p>

<pre><code>{% extends "bootstrap/base.html" %}

{% block head %}
&lt;meta charset="utf-8"&gt;
&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
{{ super() }}
&lt;!-- My ccs style --&gt;
&lt;link rel="stylesheet" href="{{url_for('.static', filename='start.css')}}"&gt;
&lt;!-- Custom Fonts --&gt;
&lt;link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-  awesome.css" rel="stylesheet"&gt;
{% endblock %}

{% block content %}

&lt;header class="header"&gt;
    &lt;div class="text-vertical-center"&gt;
        &lt;h1&gt;Welcome to my Site&lt;/h1&gt;
        &lt;h3&gt;My portfolio&lt;/h3&gt;
        &lt;br&gt;
        &lt;a href="#" class="btn btn-dark btn-lg"&gt;Next Site&lt;/a&gt;
    &lt;/div&gt;    
&lt;/header&gt;

{% endblock %}
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>html,
body {
   width: 100%;
   height: 100%;
}

body {
   font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.text-vertical-center {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

.text-vertical-center h1 {
   margin: 0;
   padding: 0;
   font-size: 4.5em;
   font-weight: 700;
}

.btn-dark {
   border-radius: 4;
   color: #fff;
   background-color: rgba(0,0,0,0.4);
}
</code></pre>

<p>What am I doing wrong ? 
<a href="http://i.stack.imgur.com/UoYjU.jpg" rel="nofollow">The result of the code in Chrome</a></p>