How Can I Vertically Center All Elements in the Tag?

Question

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.

This should help? http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ If not, can you create a fiddle with the minimal code of your existing markup, and update the question? That way you can get help better. — karthikr, Sep 08 '14 at 00:59
People won't download all your site files. Please post a minimal example in the question itself. — Oriol, Sep 08 '14 at 01:07
Hey Andrew, on Stack Overflow, we're looking for questions that can help the thousands of other people with the same problem coming from search engines. Since your code is all on a third party site, it means this won't become a useful, lasting artifact. Can you [edit] your question to include code that reproduces the problem, that way when and if your link finally breaks or no longer represents the state, this is still useful to others? Thanks! — jamesmortensen, Sep 08 '14 at 01:09

score 2 · Accepted Answer · edited May 23 '17 at 11:59

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

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

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

Good luck!

How Can I Vertically Center All Elements in the Tag?

1 Answers1