0

I want to vertically center a container div on the page. This works on JSfiddle, but when I preview the page on my computer the container stays stuck to the top of the page. The body also seems to only fill half the page.

enter image description here

Does anyone know the reason for this? I don't know if it's the code, seeing as it works on JSfiddle.

HTML:

<div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="panel login-tab">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-6">
                                    <a href="#" class="active" id="login-link">Login</a>
                                </div>
                                <div class="col-xs-6">
                                    <a href="#" id="register-link">Register</a>
                                </div>
                            </div>
                            <hr>
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <form id="login-form" method="post" style="display:block;">
                                        <div class="form-group">
                                            <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
                                        </div>
                                        <div class="form-group">
                                            <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
                                        </div>
                                        <div class="form-group">
                                            <input type="checkbox" tabindex="3" class="" name="remember" id="remember">
                                            <label for="remember">Remember me</label>
                                        </div>
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-sm-6 col-sm-offset-3">
                                                    <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <div class="text-center">
                                                        <a href="#" tabindex="5" class="forgot-password">
                                                        Forgot password?</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <form id="register-form" method="post" style="display:none;">
                                        <div class="form-group">
                                            <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
                                        </div>
                                        <div class="form-group">
                                            <input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value="">
                                        </div>
                                        <div class="form-group">
                                            <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
                                        </div>
                                        <div class="form-group">
                                            <input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Conform Password">
                                        </div>
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-sm-6 col-sm-offset-3">
                                                    <input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register">
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS:

.container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Other stylesheets:

<!--in head-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">

<!--before ending body-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="script.js"></script>
nonono
  • 591
  • 2
  • 8
  • 14
  • To tell you more, we need to see the rest of your stylesheets. I think there are some rules which overwrites the html,body { height: 100% ... } properties. – Fantasterei Oct 11 '16 at 11:39
  • This might help: http://stackoverflow.com/questions/12771982/vertically-centering-a-div-in-body. The issue fundamentally is that the `body` in jsfiddle fills up the page, but your alignment is being done inside a container that is not as large as the page. – Chris Lear Oct 11 '16 at 11:41
  • @Fantasterei edited to include stylesheets – nonono Oct 11 '16 at 11:46
  • @ChrisLear When I check the body's height it doesn't fill up the entire page. At least not on my computer. – nonono Oct 11 '16 at 11:48
  • 1
    @l-emi I ran your code, just adding `body` tags, and it worked fine. so ignore my last comment - sorry. There must be something else messing with the styling. – Chris Lear Oct 11 '16 at 12:01
  • Ah, figured the problem out! It has a very simple answer which I feel bad for not noticing: I was linking to the wrong stylesheet. Thanks for all the help anyway guys! :) – nonono Oct 11 '16 at 12:05

0 Answers0