Vertical Align

Yesterday I was given the Suite splash page, a basic design with large text and a phone number, the problem? it was vertically aligned! I didn’t realise this was so hard till I tried to take a stab at it myself.

After some Googling and going through what felt like tons of ancient articles and old school techniques I finally found one that had minimal code and was easy to implement.

.center {
  width:300px;
  height:300px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-150px;
  margin-top:-150px;
}

The catch is that the element needs to have a fixed width/height.

Most of it is self explanatory. Without the negative margins your box will technically be centred but it will use the top left of your box as its point, that’s why you use negative margins to bring them in so that they’re aligned by the centre of your div