如何垂直居中标签中的所有元素？

Well, I’m currently working on a coming soon site. So far everything has been great, but I seem to be running into one issue. For the life of me, I can't seem to get all the content vertically centered - I’ve read many pages on the Internet, but I can’t get any working.

好吧,我目前正在开展一个即将推出的网站。到目前为止,一切都很好,但我似乎遇到了一个问题。对于我的生活,我似乎无法将所有内容垂直居中 - 我在互联网上阅读了很多页面,但我无法正常工作。

The HTML:

<h1>Protean</h1>
<p>Your status bar, your way.</p>

<hr>

<a class="Button" href="#">
<i class="fa fa-spin fa-refresh"></i> Coming Soon</a>
<hr style="height:8pt; visibility:hidden;" />

The CSS:

h1 {
color: #ffffff !important;
font-size: 350%;
}
p {
color: #ffffff !important;
font-size: 19px;
}
body {
background:#4fb088 !important;
text-align:center !important;
}
.Button {
background-color:#5fc79c;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:HelveticaNeue-Medium;
font-size:16.5px;
padding:15px 35px;
text-decoration:none;
}
.Button:hover {
background-color:#6cd2a8;
}
.Button:active {
position:relative;
top:1px;
}
a:hover {
text-decoration:none;
color:white;
}
brbutton {
display: block;
margin: 10px 0;
}
hr {
height:1px;
visibility:hidden;
margin-bottom:-1px;
}

I dumped the files into a fiddle, here. If you are willing to help, that’d be appreciated.

我在这里把文件丢进了小提琴里。如果您愿意提供帮助,那将不胜感激。

Edit: Felipe M has helped me resolve my issue.

编辑:Felipe M帮助我解决了我的问题。

1 个解决方案

#1

<div class="container">
    <div class="cent"></div>
</div>

html,body
{
    height: 100%;
}
body
{
   display: table; 
   margin: 0 auto;
}

.container
{  
    height: 100%;
    display: table-cell;   
    vertical-align: middle;    
}
.cent
{
    height: 50px;
    width: 50px;
    background-color: black;      
}

You could try this: http://jsfiddle.net/danield770/tVuS6/14/
From here: Center a div horizontally and vertically and keep centered when resizing the parent
Change about your needs.

您可以尝试这样:http://jsfiddle.net/danield770/tVuS6/14/从这里:水平和垂直居中div并在调整父级大小时保持居中改变您的需求。

By the way, there isn't a way to make content centered without using some divs elements.

顺便说一句,没有一种方法可以在不使用某些div元素的情况下使内容居中。

If you want to learn more about that, I would like to recommend you some tips:

如果您想了解更多相关信息,我想向您推荐一些提示:

Good luck!

#1

<div class="container">
    <div class="cent"></div>
</div>

html,body
{
    height: 100%;
}
body
{
   display: table; 
   margin: 0 auto;
}

.container
{  
    height: 100%;
    display: table-cell;   
    vertical-align: middle;    
}
.cent
{
    height: 50px;
    width: 50px;
    background-color: black;      
}