12 comments

  • Mike Johnson, over 4 years ago

    It's 2015. Use Flexbox.

    http://caniuse.com/#feat=flexbox

    19 points
  • Matt BaxterMatt Baxter, over 4 years ago (edited over 4 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.

    8 points
    • Andrew McWattersAndrew McWatters, over 4 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, over 4 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
  • Brent RiddellBrent Riddell, over 4 years ago

    I pretty much get 'Method: Table Cell' everytime :P

    2 points
  • Doug OrchardDoug Orchard, over 4 years ago (edited over 4 years ago )

    Great tool though does not note the browser support for these options. Personally, I need to know ie7 workarounds. Tested one and it gave me "display: table-cell", which would not work on ie7 at all ( tried and tested ).

    We have ie6 down, but ie7 is still a major problem for my development.

    My fave centering technique is; http://jsbin.com/qecogi/1/

    0 points
    • David DarnesDavid Darnes, over 4 years ago

      Agreed. Great tool that gives you all the options you want.

      A browser support note is all it needs.

      0 points
    • Tamerlan SozievTamerlan Soziev, over 4 years ago

      Ie7 browser usage is around 0.1% , if you are spending time and I guess a lot of it since you said are having problems with it, maybe it's time to stop supporting it? Spending time for a 0.1% of users and let's be honest most of those users are not paying for anything since they are using an 10 year old browser and a pretty old computer, seems not a very clever idea to me.

      1 point
  • Grzegorz CiwoniukGrzegorz Ciwoniuk, over 4 years ago

    that horizontal centering:

    <div style="display:table-cell;vertical-align:middle;"> <div style="margin-left:auto;margin-right:auto;">Text Content</div> </div>

    0 points