What is a straightforward solution to vertically centering on a webpage?

I've seen a lot of discussion and debate on this with solutions from pure CSS to pure HTML. They can get pretty complicated, nesting divs within divs, using some pretty intense looking CSS. I figured I'd ask though, because I need a straightforward solution to this problem, and it needs to not rely on CSS tables (i.e. {display:table;} because I'm using that to show/hide the entire div and solutions using that never seem to work nicely with my other code. So how should I do this?

Answers


I came up with a solution. I'm not sure it's the best or most compatible, but here it is:

<style type="text/css">
  table.center {
    width: 100%;
    height: 100%;
  }
  h1.center {
    text-align: center;
  }
</style>

<div id="hide-able">
  <table class="center">
    <tr><td><h1 class="center">I'm centered!</h1></td></tr>
  </table>
</div>

If you have a better solution, please share!


Need Your Help

Use of unresolved identifier 'FBAppEvents'

ios facebook swift

I'm trying to implement a Facebook events system. To do so, I have added the FacebookSDK in my bridge file this way:

JPA ManyToMany persist only one side

java spring jpa many-to-many

I have the table User in relation of ManyToMany with Radio like the tables below. In this relation only the method saveUser persist in relationship table. To summarize only the dominant side is per...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.