html - 在 Bootstrap 3 中垂直居中 div 元素

Question

基本上这个问题困扰了我一上午。我已经查看了很多其他线程，但似乎没有一个能帮助我解决问题，这就是我提出这个问题的原因。

我只是想将我的 div 元素置于我的 Bootstrap 页面的中心。这似乎是一个简单的问题，但我无法解决它。

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;
}