↵

Vertical align anything with just 3 lines of CSS(zerosixthree.se)

over 9 years ago from Viktor T, Visual Designer

  • Julian LloydJulian Lloyd, over 9 years ago (edited over 9 years ago )

    Let's say you have height: 145px and your translateY property will be like transform:translateY(72.5px) which means you're not pixel-perfect anymore. Your texts, icons, pictures will be all blurred.

    I decided to put this to the test. (In Chrome and Firefox.)

    Transform: translateY(–50%) actually translates –50% of the element height it’s declared on (ie. the child height), not the container/parent height.

    So I tested 2 screenshots:

    • 99x99px kitten without translateY
    • 99x99px kitten with translateY(–50%)

    I overlaid these screenshots and found the rendering to be identical. In other words, translateY(–50%) applied to a 99px image (odd pixel value for height) did not result in blurry rendering… as you suggested it should by the resulting (alleged) –49.5px translation.

    I also did a couple tests with text, but I noticed no blurring. (The only blurring seems to occur during CSS transitions.)

    Perhaps Chrome and Firefox are auto-rounding, but it seems we don’t needs to worry about "pixel perfection" using this technique (in Chrome/Firefox with images and text). I have not tested SVG or any other pertinent elements, or other browsers.

    Anyone want to continue the experiment? :)

    0 points
    • Lucas MottaLucas Motta, over 9 years ago

      Hey Julian,

      The problem is not specifically on the fonts, but in the rest. If the child has an odd height, all its elements will be blurred. Again, the fonts are not the issue because it's a different kind of rendering. Take a look at this example and notice the border above the text on the second item: http://codepen.io/lucasmotta/pen/hBcEw

      I've been through that in the past and, trust me, it's not worth the fight.

      2 points
      • Julian LloydJulian Lloyd, over 9 years ago (edited over 9 years ago )

        Interesting, thanks for sharing this.

        So text and images render fine, but borders get destroyed. Do you know what else doesn’t play nice?

        Edit: I removed the border and changed the background color of the children, and its top edge is also blurred. I bet pseudo elements get blurred too. I’m curious about SVG…

        0 points
        • Lucas MottaLucas Motta, over 9 years ago

          I just updated my pen to show what happens with SVGs – unfortunately they also get blurred :(

          0 points
          • Cihad TurhanCihad Turhan, over 9 years ago

            It's normal. Browser converts everything (except fonts, under some conditions) to raster images so anything will be blurred.

            0 points