How to vertically center elements in Zurb Foundation?

Question

I am building a login form and I want the username and password fields square in the middle of the screen. I am also using the Zurb Foundation package to build this form. I am having a lot of trouble centering things vertically.

Here is my code:

<!DOCTYPE html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

    <head>
      <meta charset="utf-8" />

      <!-- Set the viewport width to device width for mobile -->
      <meta name="viewport" content="width=device-width" />
      <title>
            Registration
        </title>

         <!-- Included CSS Files (Compressed) -->
          <link rel="stylesheet" href="stylesheets/foundation.min.css">
          <link rel="stylesheet" href="stylesheets/app.css">
          <link rel="stylesheet" href="stylesheets/main.css">

          <script src="javascripts/modernizr.foundation.js"></script>

          <!-- IE Fix for HTML5 Tags -->
          <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
          <![endif]-->
    </head>
        <nav class="top-bar">
         <ul>
            <li class="name"><h1><a href="#">Title</a></h1></li>
            <li class="toggle-topbar"><a href="#"></a></li>
        </ul>
        <section>
            <ul class="left">
                <li><a href="#">Link</a></li>
            </ul>
            <ul class="right">
                <li><a href="#">Link</a></li>
            </ul>
        </section>
        </nav>
    <body>
        <div class="row" id="parent">
            <div class="six columns" id="child">
                <form id = "register">
                    <input type="text">

                </form>
            </div>
        </div>



        <script src="javascripts/jquery.foundation.topbar.js"></script>
        <!-- Included JS Files (Compressed) -->
        <script src="javascripts/jquery.js"></script>
        <script src="javascripts/foundation.min.js"></script>
        <!-- Initialize JS Plugins -->
        <script src="javascripts/app.js"></script>
    </body>
</html>

And some CSS that I've played around with, but haven't gotten to work yet:

body {
    /*background-image: url('../images/gplaypattern.png');*/
    background: red;
}

#register {
    background-color:  black;
    width:80%;
}

#parent {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    height: 80px;
}

#child {
    height: 75px;
    position:absolute;
    top: 50%;
    background: green;
}

Wierdly, if I change the height of something to be dynamic (i.e. height: 30%;) it does not work, why?

score 30 · Accepted Answer · edited Aug 31 '14 at 14:33

UPDATE

This feature is being included as a component (xy-center) in an upcoming version of Foundation. More details on Github.

If you're using an older version of Foundation, using the CSS Tricks centering method will vertically and horizontally center the sign-in form with a minimal amount of CSS/HTML markup.

HTML

<div class="row" >
    <div class="small-12 medium-6 columns" id="login">
        <form >
            <div class="row collapse">
                <div class="small-12 medium-5 columns">
                    <input type="text" name="username" placeholder="Username" />
                </div>
                <div class="small-12 medium-5 columns">
                    <input type="password" name="password" placeholder="Password" />
                </div>
                <div class="small-12 medium-2 small-centered medium-uncentered columns">
                  <a href="#" class="button postfix">Go</a>
                </div>
            </div>
        </form>
    </div>
</div>

CSS

#login {
    position: absolute;
    left: 50%;
    top: 50%;

    /*
    *  Where the magic happens
    *  Centering method from CSS Tricks
    *  http://css-tricks.com/centering-percentage-widthheight-elements/
    */
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Result

The sign-in form will stay centered vertically and horizontally regardless of screensize. Here's a screenshot of the result.

enter image description here

And the working jsFiddle

It's a screenshot of my jsFiddle I created use Zurb Foundation and a CSS class I created to vertically center an element. Click the link above to view the working demo. — Brett DeWoody, Feb 25 '14 at 19:50
Thanks - but it doesn't include the main Zurb CSS file, which is what causes the issue. I suspect (though you'd have to test it) that if that file was included, this solution would no longer work. — Sinister Beard, Feb 26 '14 at 08:00
The Foundation CSS is included. Look at the External Resources` on the left side, you'll see the foundation.min.css is included in the list. — Brett DeWoody, Feb 26 '14 at 15:35
Sorry, missed that. Yep, your solution works. Unfortunately I'm not the OP, or I'd select it as the answer! — Sinister Beard, Feb 26 '14 at 16:16

Sinister Beard · Answer 2 · 2013-07-25T08:13:35.113

6

Foundation doesn't handle vertical alignment well: https://github.com/zurb/foundation/issues/411.

You can approximate it with vertical padding, but there's no neat way around it for dynamic content.

The following jsFiddle (not created by me) shows how it should work using

div {
display: table-cell;
vertical-align: middle;
height: 50px;
border: 1px solid red;
}

http://jsfiddle.net/53ALd/6/ - but it won't in conjunction with the rest of the Foundation CSS.

edited Jul 25 '13 at 08:13

answered Jul 24 '13 at 14:23

Sinister Beard

3,570
12
59
95

This doesn't work for me. The form is positioned in the upper left corner of the window for me. Is this jsFiddle supposed to center the form? – Brett DeWoody Feb 24 '14 at 22:57
@BrettDeWoody The JSFiddle illustrates that verical centering in Foundation is broken, rather than a solution. The only way I've found (and I've not tried the new release of Foundation yet) is to approximate it with vertical padding. – Sinister Beard Feb 25 '14 at 08:16
I'm confused why this answer was selected as correct when it doesn't provide a solution to the question. – Brett DeWoody Feb 25 '14 at 14:10
Because at the time, there was no real solution, but the padding solution did provide a workaround. I did upvote your answer, however. – Sinister Beard Feb 25 '14 at 14:17
1

This will just work if the `table-cell` is included inside a container with `display: table`. See corrected fiddle: http://jsfiddle.net/icoloma/NGVjk/1/ – Nacho Coloma Jun 02 '14 at 10:20

score 0 · Answer 3 · edited May 23 '17 at 10:31

0

The problem is that HTML/CSS doesn't really handle vertical centering well. Zurb's Foundation isn't going to help or hurt you in this respect.

See this very similar question Creating a vertically and horizontally centered html div

edited May 23 '17 at 10:31

Community

1
1

answered Oct 22 '12 at 13:25

Ed Charbeneau

4,501
23
23

1

Zurb Foundation specifically does mess with vertical centering; examples that work in the following jfiddle (http://jsfiddle.net/53ALd/6/) don't work in Foundation. – Sinister Beard Jul 24 '13 at 14:17
Since you didn't create an example for how it "doesn't work in Foundation" I created one for you, except it works just fine. (http://jsfiddle.net/SpyAk/3/) Foundation does not provide classes to center vertically, instead it leaves it up to the developer to write their own vertical alignment CSS if they wish. So I'll state again, this is not a Foundation question, but instead "how do i vertically center something using HTML/CSS" question, since one does not "Use Foundation" to vertical align things. – Ed Charbeneau Jul 24 '13 at 18:32
Let me put it another way: I can't get it to work in Foundation, and neither can a bunch of other people: https://github.com/zurb/foundation/issues/411. Vertical centering examples work fine outside of Foundation, so there must be something in the base CSS that messes with it. – Sinister Beard Jul 25 '13 at 08:09
Added an example showing how it should work, outside of Foundation. – Sinister Beard Jul 25 '13 at 08:14
The git hub issue you linked to is from two major revisions back (Foundation 2.0) Foundation has been rewritten twice from scratch since then, are you still using 2.0? – Ed Charbeneau Jul 25 '13 at 13:22
No, version 4.0, but the issue persists - at least it does for me. If you've got it working in V4, I'd be genuinely delighted! – Sinister Beard Jul 25 '13 at 13:59

How to vertically center elements in Zurb Foundation?

3 Answers3