CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3397240
user3397240

Reputation: 239

Center div element vertically in Bootstrap 3

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/

Upvotes: 1

Views: 99

Answers (1)

Yauheni Leichanok
Yauheni Leichanok

Reputation: 1769

Here you go:

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

Upvotes: 1

Related Questions