如何在 Zurb Foundation 中垂直居中元素？答案

【问题标题】：How to vertically center elements in Zurb Foundation?如何在 Zurb Foundation 中垂直居中元素？
【发布时间】：2012-10-11 15:36:49
【问题描述】：

我正在构建一个登录表单，我希望用户名和密码字段位于屏幕中间。我也在使用 Zurb Foundation 包来构建这个表单。我在垂直居中时遇到了很多麻烦。

这是我的代码：

<!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>

还有一些我玩过但还没有开始工作的 CSS：

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;
}

奇怪的是，如果我将某物的高度更改为动态的（即height: 30%;）它不起作用，为什么？

【问题讨论】：

标签： css formatting centering zurb-foundation

【解决方案1】：

更新

此功能将作为组件（xy-center）包含在即将发布的 Foundation 版本中。更多详情请关注Github。

如果您使用的是旧版本的 Foundation，使用 CSS Tricks centering method 将使用最少的 CSS/HTML 标记将登录表单垂直和水平居中。

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%);
}

结果

无论屏幕大小如何，登录表单都将保持垂直和水平居中。这是结果的屏幕截图。

还有工作的jsFiddle

【讨论】：

那张截图来自 Zurb 基金会吗？
这是我使用 Zurb Foundation 创建的 jsFiddle 的屏幕截图和我创建的用于垂直居中元素的 CSS 类。点击上面的链接查看工作演示。
谢谢 - 但它不包括导致问题的主 Zurb CSS 文件。我怀疑（尽管您必须对其进行测试）如果包含该文件，则此解决方案将不再有效。
包含基础 CSS。查看左侧的 External Resources`，您会看到 Foundation.min.css 已包含在列表中。
抱歉，错过了。是的，您的解决方案有效。不幸的是，我不是 OP，否则我会选择它作为答案！

【解决方案2】：

Foundation 不能很好地处理垂直对齐：https://github.com/zurb/foundation/issues/411。

您可以使用垂直填充来近似它，但对于动态内容没有巧妙的方法。

以下 jsFiddle（不是我创建的）展示了它应该如何使用

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

http://jsfiddle.net/53ALd/6/ - 但它不会与 Foundation CSS 的其余部分结合使用。

【讨论】：

这对我不起作用。表格对我来说位于窗口的左上角。这个 jsFiddle 是否应该使表单居中？
@BrettDeWoody JSFiddle 说明 Foundation 中的垂直居中已被破坏，而不是解决方案。我发现的唯一方法（我还没有尝试过 Foundation 的新版本）是用垂直填充来近似它。
我很困惑为什么这个答案在没有为问题提供解决方案的情况下被选为正确。
因为当时并没有真正的解决方案，但是 padding 解决方案确实提供了一种解决方法。不过，我确实赞成你的回答。
如果table-cell 包含在带有display: table 的容器中，这将起作用。请参阅更正的小提琴：jsfiddle.net/icoloma/NGVjk/1

【解决方案3】：

问题在于 HTML/CSS 并不能很好地处理垂直居中。在这方面，Zurb 基金会不会帮助或伤害您。

看到这个非常相似的问题Creating a vertically and horizontally centered html div

【讨论】：

Zurb Foundation 专门弄乱了垂直居中；在以下 jfiddle (jsfiddle.net/53ALd/6) 中有效的示例在 Foundation 中无效。
由于您没有创建一个示例来说明它如何“在 Foundation 中不起作用”，因此我为您创建了一个示例，但它可以正常工作。 (jsfiddle.net/SpyAk/3) Foundation 不提供垂直居中的类，而是让开发人员根据需要编写自己的垂直对齐 CSS。所以我要再次声明，这不是基础问题，而是“我如何使用 HTML/CSS 垂直居中某物”问题，因为人们不会“使用基础”来垂直对齐东西。
让我换一种说法：我无法让它在 Foundation 中工作，其他人也不能：github.com/zurb/foundation/issues/411。垂直居中的例子在 Foundation 之外工作得很好，所以在基础 CSS 中肯定有一些东西与它混淆。
添加了一个示例，说明它应该如何在 Foundation 之外工作。
你链接到的 git hub issue 来自两个主要修订版（Foundation 2.0），从那时起 Foundation 已经从头开始重写了两次，你还在使用 2.0 吗？