Center div vertically

Question

I've got my CSS/HTML code here.

How do I align this so that it is vertically centered?

HTML

<div class="container" data-ng-controller="publicHome">
    <div class="col-sm-4 col-sm-offset-4">// <--- I would like this div vertically centered!        
        <form data-ng-submit="signIn()" class="form-horizontal">
            <div class="form-group">
                <input type="email" data-ng-model="email" placeholder="email" class="form-control input-lg">
            </div>
            <div class="form-group">
                <input type="password" data-ng-model="password" placeholder="password" class="form-control input-lg">
            </div>
            <label>
            remember me
            <input type="checkbox" data-ng-model="rememberMe" class="signInCheckbox">
            </label>
            <div style="float:right; color:#C0C0C0;">
                <a data-ng-click="">forgot password?</a>
            </div>
            <div class="form-group center-block">
                <button type="submit" class="btn btn-success btn-lg center-block">sign in</button>
            </div>
        </form>
        <div class="alert alert-danger col-md-8 col-md-offset-2 text-center" role="alert">
            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> incorrect credentials
        </div>
    </div>
</div>

CSS

.signInCheckbox {
    margin-left: 5px;
}

.forgotPassword {
    float: right;
    color: #C0C0C0;
}

possible duplicate of http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div?rq=1 — Steve, Sep 26 '15 at 19:44
@Steve There is a very big difference between vertical and horizontal centering... — basickarl, Sep 26 '15 at 19:49
sry wrong one. this one should be it http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div — Steve, Sep 26 '15 at 19:52
@Steve I would know how to center a div normally, but since I am using bootstrap it is giving me unwanted results! — basickarl, Sep 26 '15 at 20:10

score 0 · Answer 1 · 2015-09-26T19:54:04.567

0

Add this to your div:

.customdiv {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate 0, -50%);
    -o-transform: translate(0, -50%);
}

And this to your parent div:

.parentdiv {
    position: relative;
}

FIDDLE

edited Sep 26 '15 at 19:54

answered Sep 26 '15 at 19:51

Sorry, doesn't work with the example I posted :( (link) – basickarl Sep 26 '15 at 19:53
Check out the FIDDLE in my Answer :) – Sep 26 '15 at 19:54
Good answer if I wasn't using bootstrap, but it doesn't work as said with bootstrap for some reason!? – basickarl Sep 26 '15 at 20:00
It's required to keep the "forgot password?" to the right side! – basickarl Sep 26 '15 at 20:05
What div do you like to center? – Sep 26 '15 at 20:06
I realized that you might be meaning another div than me, I updated the question :) – basickarl Sep 26 '15 at 20:07

score 0 · Answer 2 · answered Sep 26 '15 at 20:01

0

Remove the float right.

.forgotPassword {
    /* float: right; */
    color: #C0C0C0;
}

Maybe you were trying to do this? https://jsfiddle.net/2jgrzqnh/

answered Sep 26 '15 at 20:01

Amin Mohamed Ajani

264
4
15

Updated my question to show which dive I was wanting centered vertically :) – basickarl Sep 26 '15 at 20:07

score 0 · Answer 3 · answered Sep 26 '15 at 20:16

0

This should work. Add this CSS:

.container {
    width: 100%;
    height: 100%;
    position: relative;
}

.signIn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate -50%, -50%);
    -o-transform: translate(-50%, -50%);
}

answered Sep 26 '15 at 20:16

Unfortunetly it's not again, take a look: http://www.bootply.com/rKNvoqGu19 feel free to edit the code in the link :) – basickarl Sep 26 '15 at 20:27

score 0 · Answer 4 · answered Sep 26 '15 at 20:37

0

You just need to add two empty colums either side of your .signIn Div.

<div class="col-sm-4"></div>
  <div class="col-sm-4 signIn">
   // your form here
  </div>
<div class="col-sm-4"></div>

Bootstraps grid works on a basis that all the columns add up to 12. http://www.bootply.com/X19w9RZawU

answered Sep 26 '15 at 20:37

Ashley Brown

4,756
6
32
70

I think you misread the topic, it's vertical positioning I'm trying to fix, not horizontal! – basickarl Sep 26 '15 at 20:38

score 0 · Answer 5 · 2015-09-26T21:00:09.197

0

The alert has a margin-bottom: 20px. The <div> at the top needs margin-top: 20px, so that the box is vertically centered.

HTML

...
<div class="col-sm-4 col-sm-offset-4 margin-top-20">
...

CSS

.margin-top-20 {
    margin-top: 20px;
}

Bootply

edited Sep 26 '15 at 21:00

answered Sep 26 '15 at 20:55

Center div vertically

5 Answers5