How to center vertically and horizontally a div using Bootstrap?

I have a problem with my CSS. I have a panel form in my index page and I want to move it in the middle of the page vertically and horizontally. But I don’t know how to create a CSS for this.

Here’s my sample code:

<div class="login_header"></div>

<div class="container" style="text-align: center;">
    <div class="col-md-6 col-md-offset-3">
        <div class="panel_form panel panel-default">
            <div class="panel-content">
                <h1>test</h1>
            </div>
            <div class="panel-footer">
                <p>test</p>
            </div>
        </div>
    </div>
</div>

<footer class="footer"></footer>

I have a CSS like this:

.login_header { min-height: 50px; background-color: #f5f5f5; }

.panel_form {
   /* I don't have an idea with this */
}

.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%;
    height: 50px;
    background-color: #f5f5f5;
}

I am not good enough in CSS that’s why I need your help. That’s all thanks.. 🙂

Leave a Comment