26 comments

  • Glenn McCombGlenn McComb, 8 years ago

    This is the page I always end up hitting: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

    6 points
    • Dominik SchmidtDominik Schmidt, 8 years ago (edited 8 years ago )

      Be careful with this, if it's dynamic content and the box is uneven it is getting blurry with this snippet. Ok, to be honest it's the easiest & at the same time best feature with most browser support, but there is (if you don't need to hustle with the IE9 and some IE10 - you can fix IE10 with some polyfills I think) the use of flex-box that is much more effective, because it is rounding things. SO be sure to also check out the centering of things with css using the good'ol table layout method (using div's of course – Credits to Marc Audett give that man an upvote if you found this a good solution).

      0 points
  • Max StoiberMax Stoiber, 8 years ago (edited 8 years ago )

    I always refer to this great webapp by Oliver Zheng: http://howtocenterincss.com

    4 points
  • Edmundo SantosEdmundo Santos, 8 years ago

    Been there, done that!

    If you're concern about IE8 support, here's a nice approach:

    .absolute-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

    At least it's easy to remember! (don't forget the prefixes)

    2 points
    • E BensleyE Bensley, 8 years ago

      Ah but this has the same problem as @glenn's solution, by which if the length of the content box is uneven the content will become slightly blurry due to the transform. I've been using 100% height on both html and body then using padding to center an object. This isn't precise but it results in a clean presentation in most use cases.

      1 point
      • Hawke BassignaniHawke Bassignani, 8 years ago

        Update (April 25th) As a few people have pointed out, this method can cause elements to be blurry due to the element being placed on a “half pixel”. A solution for this is to set its parent element to preserve-3d. Like following:

        0 points
        • Dominik SchmidtDominik Schmidt, 8 years ago

          Check browser support of transform-style, please :)

          0 points
          • Hawke BassignaniHawke Bassignani, 8 years ago

            True, but they added it with IE Edge. (And to the IE 10 dev preview… in November/Dec. 2014, I think?).

            0 points
            • Dominik SchmidtDominik Schmidt, 8 years ago

              But many people are using IE8, IE9 and IE10. I am not supporting IE8 anymore, when developing, but IE9 and IE10 should be possible to manage when it comes to something silly as vertical-centering.

              And IE11 is also not supported.

              0 points
            • Dominik SchmidtDominik Schmidt, 8 years ago

              (But I always use the table from caniuse to see which browser-support my homepage needs. So importing GA statistics and see if there is a need to support IE)

              0 points
  • Rick LanceeRick Lancee, 8 years ago (edited 8 years ago )

    Use flexbox; but only if you can afford to neglect anything below IE11

    2 points
  • Ix TechauIx Techau, 8 years ago

    Simple:

    .parent-element text-align: center &:before content: '' display: inline-block height: 100% vertical-align: middle .centered-element display: inline-block vertical-align: middle
    1 point
  • Matthew Pavkov, 8 years ago

    Surprised no one mentioned this vertical center method. Granted, you need to declare a height so it certainly isn't as versatile as flexbox or transform methods, but it's worth noting.

    0 points
  • Julian MaunderJulian Maunder, 8 years ago

    Being told "(not impressed) It needs to be bigger and in the middle." for the 100th time, cries for 7 minutes...

    0 points
  • Eric BoyerEric Boyer, 8 years ago (edited 8 years ago )

    I'm not sure Ewen is looking for the same results he's finding in Google as comments. Don't worry brother, I appreciate your message. Vertical centering shouldn't be as tricky as it is. :)

    0 points
  • Dan CortesDan Cortes, 8 years ago

    Wait, the prev/next buttons were going to be h1's before they became li's? Am I reading that right? Also, I get using inline styles to show a young'n, but I also don't think it's a stretch to think that she would've understood how external stylesheets work. The fact that both buttons would be styled the same might have driven the point home.

    Then maybe OP could've taught her how to use Grunt, Sass, LiveReload (or Browsersync so she can test quickly on multiple devices), Node, a CMS so she can edit her blog on the go (I recommend KeystoneJS even though it's not v1 yet), and if she's gonna learn Keystone, then she's gonna need to learn a good templating language. How old is this kid? If she's at least 9, it might help to teach her about hosting, maybe using Heroku, so her recess club friends can actually access the site. If she's really ambitious, just skip the CMS and use Jekyll and GitHub pages so hosting is free.

    0 points
  • Ciriac TrompCiriac Tromp, 8 years ago

    My go to page https://css-tricks.com/centering-in-the-unknown. I usually end up using the display: table-cell approach.

    0 points
  • Hash MilhanHash Milhan, 8 years ago

    i'm still not sure what's the definitive way of doing this...

    0 points