Vertical center, finally!

Though I’m not a good web designer, but sometimes I do need to mockup some web pages or in charge for web design for my fellow unlucky internal user, and there is time that I want to center everything to center, such as login box, it will look nice to be centered.

But extra DOM, extra style, it always confused the hell out of me, and I don’t want to use <table> for layout, <table> not use for this purpose. But lucky enough, CSS3’s display:box came to save the life.

It’s dead simple to do that using the CSS3:

div {  
  width: 350px;  
  height: 100px;  
  border: 1px solid black;

  /* Firefox */  
  display: -moz-box;  
  -moz-box-orient: horizontal;  
  -moz-box-pack: center;  
  -moz-box-align: center;

  /* Safari and Chrome */  
  display: -webkit-box;  
  -webkit-box-orient: horizontal;  
  -webkit-box-pack: center;  
  -webkit-box-align: center;

  /* W3C */  
  display: box;  
  box-orient: horizontal;  
  box-pack: center;  
  box-align: center;  
}