Sass Never Forgets

Some CSS techniques require me to Google about like a chicken with its head cut off. One such technique is placing a div in the dead center of a page (vertically and horizontally). Since I’m using Sass pretty much exclusively these days, I decided to define this technique as a mixin so I don’t have to look it up anymore.

Hopefully this can be of use to others. YMMV:

The mixin definition:

=dead-center(!height,!width)
  :height= !height
  :margin-top= -(!height / 2)
  :top 50%
  :width= !width
  :margin-left= -(!width / 2)
  :left 50%
  :position absolute
  :text-align center

To use it on an element:

#centered
  +dead-center(200px,500px)

Now I’ll never forget how. Thanks Sass!