在Bootstrap 3中垂直居中div元素

Question

Basically this has been bugging me all morning. I've looked at plenty of other threads but none seem to help me out which is why I'm creating this question.

I simply want to center my div element on my bootstrap page. It seems like a simple issue but I just cannot fix it.

Html:

<div class="wizard-box"></div>

Css:

.wizard-box {
    background-color: green;
    height: 300px;
    width: 300px;
    margin: auto;
}

I've created a jsFiddle: http://jsfiddle.net/frP2Z/

Answer 1

Here you go:

.wizard-box {
    background-color: green;
    height: 300px;
    width: 300px;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -150px;
}