Centre a Grid with a DIV container using Bootstrap

Question

I am creating a HTML5 web app for Android and iphone.

To keep things simple I have a 'master' page and a 'login' page.

This is my markup:

<div class="container-fluid  pagination-centered" style="width: 100%; height: 100%; margin: auto; background-color: yellow;">
    <div class="navbar navbar-inverse navbar-fixed-top" id="Header" style="min-height: 37px;">
        <div class="col-xs-12">
            <!--Header stuff goes here-->
        </div>
    </div>
    <div class="row" id="Contents" style="height: 100%;">
        <div class="col-xs-12" style="vertical-align: middle;">
            <div id="PIN" style="display: none;height: auto;">
            </div>
            <div id="Manager" style="display: none;height: auto;">
            </div>
            <div id="LogIn" style="background-color: white;height: auto;">
            </div>
            <div id="Live" style="display: none;height: auto;">
            </div>
        </div>
    </div>
    <div class="navbar navbar-inverse my-footer navbar-fixed-bottom" style="height: 22px; background-color: black;">
        <div class="container-fluid" style="height: 22px">
            <div id="rowFooter" style="width: 100%">
               <!--footer stuff goes here-->
            </div>
        </div>
    </div>
</div>

The markup for my LogIn.html page is this:

<html>
<body>

    <div class="row">
        <div id="lblSubHeader" class="col-xs-12" style="color: white;padding-left:5px; float: left; font-size:large;text-align:left;
font-weight: 600; width: 100%; overflow: hidden">Register</div>
    </div>
    <div class="row" id="row1" style="margin-top:15px;">
        <div class="col-xs-12 navbar-text text-left" style="color: #999999;margin-bottom:3px; font-weight: bold;
            margin-left: 5px; width: 100%; font-size: smaller;">
            Email address
        </div>
    </div>
    <div class="row" id="Div1">
        <div class="col-xs-12">
            <input id="txtUsername" type="text" class="form-control input-md" style="width: 100%;margin-bottom:3px; " />
        </div>
    </div>
    <div class="row" id="Div2">
        <div class="col-xs-12 navbar-text text-left" style="color: #999999;margin-bottom:3px;  margin-top:3px; font-weight: bold;
            margin-left: 5px; width: 100%; font-size: smaller;">
            Password
        </div>
    </div>
    <div class="row" id="Div3">
        <div class="col-xs-12">
            <input id="txtPassword" type="password" class="form-control input-md" style="width: 100%" />
        </div>
    </div>
    <div class="row" id="Div4">
        <div style="left: 0px;  float: right;padding-top:45px;" class="col-xs-12">
            <a href="#" id="btnOKLogIn" class="button"><img src="../Common/Images/Buttons/GO.png" /></a>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="../Mobile/Scripts/LogIn.js"> 
</script>

I want to center pages in the middle of the container DIV.

With the markup above the div 'page' is always vertically up the top of the page.

I have gone through several examples found on Google and none seem to work. The latest one I used is what is above.

I have to assume the down vote is a personal thing. There is code/markup and there is an attempt to get it working as I want to. — Andrew Simpson, Dec 15 '14 at 12:47

Patrick · Accepted Answer · 2014-12-15T14:29:32.430

1

If I understand correctly, you'd like to vertically center your content. Here's a mock up that might help you on your way:

http://jsfiddle.net/srs1em1s/

and relevant code:

html:

<div class="page">This should be vertically centered on your screen</div>

css:

.page {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  display:table;
}

Updated fiddle: http://jsfiddle.net/qe9gvukq/2/

edited Dec 15 '14 at 14:29

answered Dec 15 '14 at 12:50

Patrick

872
1
5
14

1

I also found a similar question that might help you out: http://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a-div – Patrick Dec 15 '14 at 12:52
Hi, this did not work for me I am afraid. I am using Bootstrap/Twitter and it is possible the style settings are being over-written, I DO appreciate your time though. Thanks – Andrew Simpson Dec 15 '14 at 13:07
1

If you can post a fiddle that links bootstrap and your code, I can take a look at it. It's hard without any context. – Patrick Dec 15 '14 at 13:22
Hi, just joined Fiddler for 1st time. This is the URL : http://jsfiddle.net/d1d1/qe9gvukq/ – Andrew Simpson Dec 15 '14 at 13:38
1

Okay, so this question provides a really good explanation: http://stackoverflow.com/questions/22196587/how-to-center-align-vertically-the-container-in-bootstrap But I've also updated my answer above with a newer fiddle that is closer to your code. Hopefully that helps. – Patrick Dec 15 '14 at 14:28
Hi, I will give this a go and report back as soon I can. Many thanks :) – Andrew Simpson Dec 15 '14 at 14:54
Hi, on an iPhone this works great. On the Windows Phone 8.1 browser it does not. The text (in this case) 'this is your page content' does not appear anywhere. I did not originally specify wp8 in my question so I give you the coveted 'green tick'. If you know how to render this on Windows Phone then would be an added bonus for me. Thanks 4 ur time btw – Andrew Simpson Dec 15 '14 at 16:17
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/66938/discussion-between-patrick-and-andrew-simpson). – Patrick Dec 15 '14 at 16:46

Centre a Grid with a DIV container using Bootstrap

1 Answers1