Html 在骨架中居中 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18076916/
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
Centering a div in Skeleton
提问by Can
For a project of mine, I'm using Skeleton Boilerplate for the first time. And I'm looking for the best practice of centring a div in Skeleton without bashing into the rules of Skeleton.
对于我的一个项目，我第一次使用 Skeleton Boilerplate。而且我正在寻找在 Skeleton 中居中 div 而又不违反 Skeleton 规则的最佳实践。
At the moment, I've the following structure for a login page.
目前，我有以下登录页面结构。
HTML:
HTML：
<div class="container">
<div class="sixteen columns vertical-offset-by-one">
<div id="loginBox">
<img src="images/yeditepeLogo.png" alt="Yeditepe Logo" class="yeditepeLogo" />
<form action="" id="loginForm">
<input type="text" name="username" required placeholder="username" class="loginTextField">
<input type="password" name="password" required placeholder="password" class="loginTextField">
<input type="submit" value="Log In" class="loginButton" />
</form>
</div><!-- loginBox -->
</div><!-- sixteen columns -->
<div class="sixteen columns">
<p align="center"><a href="registration.html" target="_blank">Click here to register</a></p>
</div>
</div><!-- container -->
CSS:
CSS：
#loginBox, #registrationBox {
width: 470px;
height: 450px;
background-color: white;
left: 245px; */
top: 20px; */
position: relative;
margin: 0px auto; }
#registrationBox {
height: 500px; }
.yeditepeLogo {
position: relative;
left: 40px;
top: 33px; }
#loginForm, #registrationForm {
position: relative;
top: 45px; }
.loginTextField, .registrationTextField {
position: relative;
height: 40px;
width: 388px;
left: 40px;
border-color: #dedede;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
text-align: left;
font-size: 18px;
text-indent: 10px;
-webkit-appearance: none; }
.loginTextField:focus, .registrationTextField:focus {
outline-color: #ff9800;
outline-style: solid;
outline-width: 1px;
border-color: white; }
.loginTextField:nth-child(2), .registrationTextField:nth-child(3) {
margin-bottom: 40px; }
.loginButton, .registrationButton {
background-color: #77a942;
position: relative;
border: none;
width: 390px;
height: 60px;
left: 40px;
color: white;
font-size: 24px;
text-align: center;
opacity: 0.8; }
.loginButton:hover, .registrationButton:hover {
opacity: 1; }
As you can see, that #loginBox has a fixed width/height and it should always be on the centre of the page. margin: 0px auto code gives it the horizontal centring. But is it the best practice in Skeleton? Does Skeleton provide a better way?
如您所见，#loginBox 具有固定的宽度/高度，它应该始终位于页面的中心。margin: 0px 自动代码使其水平居中。但它是 Skeleton 中的最佳实践吗？Skeleton 是否提供了更好的方法？
Also how can I provide it's vertical centring?
另外我怎样才能提供它的垂直居中？
回答by gkj
There's actually a built in way of centering divs in Skeleton.
实际上，在 Skeleton 中有一种内置的居中方式。
<div class="sixteen columns">
<div class="four columns offset-by-six">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
The offset-by-six in this case can be altered from one to fifteen, and offsets the column at hand by as many columns as entered. As a neat feature, the offsetting is not affecting alignment when smaller screens are used.
在这种情况下，偏移 6 可以从 1 更改为 15，并将手头的列偏移与输入的列一样多。作为一个简洁的功能，当使用较小的屏幕时，偏移不会影响对齐。
To clarify: This doesn't center the actual content in the div, but centers the div itself.
澄清一下：这不会将 div 中的实际内容居中，而是将 div 本身居中。
回答by asus3000
I know it has been a while since this question was asked, but maybe somebody else can use the answer. I was able to accomplish centering with Skeleton by filling one-third column class with a space, then the next one-third column class with content, then another one-third column class with a space again.
我知道这个问题已经有一段时间了，但也许其他人可以使用答案。我能够通过用空格填充三分之一的列类，然后用内容填充下一个三分之一的列类，然后再用一个空格填充另一个三分之一的列类来实现与 Skeleton 的居中。
<div class="one-third column"> </div>
<div class="one-third column"><p>Center of the screen.</p></div>
<div class="one-third column"> </div>
回答by Patrick
You can set the container to
您可以将容器设置为
.container {
position: absolute;
top: 50%;
left: 50%;
margin-left: -43 //replace with half of the width of the container
margin-top: -52 //replace with half of the height of the container
}
set the parent container or element to position: relative;
将父容器或元素设置为 position:relative;
Here's a good article about How to Center Anything With CSS
这是一篇关于如何使用 CSS 居中的好文章
回答by Phillip Chan
Asus3000's answer is good as that is what I do and it works well. I would only add that on mobile, it adds quite a bit of unwanted vertical space. To avoid mobile vertical space, I use a class .filler and hide it on mobile.
Asus3000 的回答很好，因为这就是我所做的，而且效果很好。我只会在移动设备上添加它，它会增加很多不需要的垂直空间。为了避免移动垂直空间，我使用类 .filler 并将其隐藏在移动设备上。
HTML
HTML
<div class="one-third column filler"> </div>
<div class="one-third column"><p>Center of the screen.</p></div>
<div class="one-third column filler"> </div>
CSS
CSS
/* or whatever mobile viewport */
@media only screen and (max-width: 960px) {
.filler { display: none}
}
回答by kajate
A way I believe works pretty good is:
我认为效果很好的一种方法是：
<div class="container">
<div class="row">
<div class="two-half column">
centered div content
</div>
</div>
</div>
This makes the div centered and responsive. You can change margin-top to make it all the way in the middle, however changing width will (of course) not make it centered anymore.
这使 div 居中且响应迅速。您可以更改 margin-top 使其一直居中，但是更改宽度（当然）不会使其居中。
Correct me if I'm wrong but this works for me! :)
如果我错了，请纠正我，但这对我有用！:)
