在Bootstrap 3中垂直居中div元素

Question

基本上，這整個上午一直困擾着我。 我看過很多其他主題，但似乎沒有一個對我有幫助，這就是為什么我要創建這個問題。

我只是想將div元素居中在我的引導頁面上。 這似乎是一個簡單的問題，但我無法解決。

HTML：

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

CSS：

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

我創建了一個jsFiddle： http : //jsfiddle.net/frP2Z/

Answer 1

干得好：

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