CSS 如何在 Zurb Foundation 中垂直居中元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13001059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically center elements in Zurb Foundation?
提问by SimaPro
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.
我正在构建一个登录表单，我希望用户名和密码字段位于屏幕中间。我也在使用 Zurb Foundation 包来构建这个表单。我在垂直居中时遇到很多麻烦。
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:
还有一些我玩过但还没有开始工作的 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;
}
Wierdly, if I change the height of something to be dynamic (i.e. height: 30%;) it does not work, why?
奇怪的是，如果我将某些东西的高度更改为动态（即height: 30%;）它不起作用，为什么？
回答by Brett DeWoody
UPDATE
更新
This feature is being included as a component (xy-center) in an upcoming version of Foundation. More details on Github.
此功能将作为一个组件 (xy-center) 包含在即将发布的 Foundation 版本中。关于Github 的更多细节。
If you're using an older version of Foundation, using the CSS Tricks centering methodwill vertically and horizontally center the sign-in form with a minimal amount of CSS/HTML markup.
如果您使用的是旧版本的 Foundation，则使用CSS Tricks 居中方法将使用最少的 CSS/HTML 标记将登录表单垂直和水平居中。
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
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.
无论屏幕大小如何，登录表单都将保持垂直和水平居中。这是结果的屏幕截图。
And the working jsFiddle
和工作jsFiddle
回答by Sinister Beard
Foundation doesn't handle vertical alignment well: https://github.com/zurb/foundation/issues/411.
Foundation 不能很好地处理垂直对齐：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
下面的 jsFiddle（不是我创建的）展示了它应该如何使用
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.
http://jsfiddle.net/53ALd/6/- 但它不会与 Foundation CSS 的其余部分结合使用。
回答by Ed Charbeneau
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.
问题是 HTML/CSS 并不能很好地处理垂直居中。Zurb 基金会不会在这方面帮助或伤害您。
See this very similar question Creating a vertically and horizontally centered html div
看到这个非常相似的问题创建一个垂直和水平居中的 html div
