↵

How to Center in CSS(howtocenterincss.com)

8 years ago from John Emerson, backspace.com

  • Matt BaxterMatt Baxter, 8 years ago (edited 8 years ago )

    Using transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%; position: absolute; is a lot nicer for elements with unknown width/height.

    Edit: Forgot the negative signs.

    7 points
    • Andrew McWattersAndrew McWatters, 8 years ago

      Quite a few people are upvoting this, but please don't do this. :( You break transitions, and transforms like this are subject to subpixel positioning, causing text and other elements to end up blurry sometimes.

      0 points
      • Matt BaxterMatt Baxter, 8 years ago

        All of these techniques have drawbacks and each are useful in different scenarios. You just have to decide which drawbacks are worth it for what you're trying to do.

        2 points