Centering Mixin

Assuming the parent element has position: relative;, these four properties will center a child element both horizontally and vertically inside, no matter what the width of height of either are.

@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
.parent {
  position: relative;
.child {
  @include centerer;

See the Pen Centerer Mixin by Chris Coyier (@chriscoyier) on CodePen.

Although beware if the child element being centered is taller than parent, the top could get cut off.


If you want to be able to center in only one direction...

@mixin centerer($horizontal: true, $vertical: true) {
  position: absolute;
  @if ($horizontal and $vertical) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } @else if ($horizontal) {
    left: 50%;
    transform: translate(-50%, 0);
  } @else if ($vertical) {
    top: 50%;
    transform: translate(0, -50%);

See the Pen yybgZd by Chris Coyier (@chriscoyier) on CodePen.


  1. User Avatar
    Permalink to comment#

    What are your thought’s on using display: table; on the parent and display: table-cell; on the child with vertical-align etc. to achieve a similar outcome?

    I use that technique a lot but it makes me feel a little dirty. It would be good to see another opinion.

  2. User Avatar
    Permalink to comment#

    Is there any specific reason to use a mixin for this and not a placeholder selector, or does it just come down to taste?

  3. User Avatar
    Matt Przybylski
    Permalink to comment#

    Thanks for this Chris. Quick heads up that the Fancier version is missing a % for the $vertical bit and thus is not centering correctly in the example.

  4. User Avatar
    Jasper Espejo

    Thanks for the mixin. I modified a bit to center right and bottom. I’m new to sass so I’m wondering if there might be a cleaner way to do this:

  5. User Avatar
    Permalink to comment#

    Nice mixin!

    However, there’s a typo in the else if section:

    @else if ($vertical) {
        top: 50%;
        transform: translate(0, -50);

    You forgot the %. Should be translate(0, -50%);


  6. User Avatar
    Permalink to comment#

    CSS transform needs to be prefixed for full browser support.

    -webkit-transform: mytransform(); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 /
    -ms-transform: mytransform(); /
    IE 9 /
    transform: mytransform(); /
    IE 10, Fx 16+, Op 12.1+ */

  7. User Avatar
    Permalink to comment#

    This technique works OK, but when user zooms the page, it is not exactly 100% accurate. Please try zooming this pen:

  8. User Avatar
    Kyle Lavery
    Permalink to comment#

    Why not use this? I find it to be much more suitable.

    @mixin center {
      position: absolute;
      top: 0; bottom: 0;
      left: 0; right: 0;
      margin: auto;
    • User Avatar
      Dan Gayle
      Permalink to comment#

      Your parent needs to have a set height for this to work, right?

  9. User Avatar

    Thanks! Converted to LESS if anyone is interested:

    • User Avatar
      Stephen Ginn
      Permalink to comment#

      Love your code! I was previously doing this with three separate LESS mixins. This saved me from having to pick apart sass code.

      I’ve tweaked it a bit to make it even simpler / more readable. Also switched to mixins for vender prefixes.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.