Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

The Loneliest Unicorn by Josh Cooley http://depot.ly/nK62k

Welcome to the weird world of LA’s Marilyn Monroe impersonators http://depot.ly/nK99r  via @itsnicethat

Beautiful Tumblr by @gkurkdjian – http://depot.ly/nJWJd  – Weekly Animated GIFs

Enjoy a clutter-free presentation of your work: http://depot.ly/nK6Do

How to generate h1 – h6 font sizes using LESS CSS http://depot.ly/nJZgd  *by @alliswell

In one second on the Internet there are … http://depot.ly/nJWxU

The Apple Standard: 6 Guiding Principles for a Better Web Experience http://depot.ly/nJWuW  *Good read

This is cool: http://tweetping.net/  shows the Twitter activity in realtime

Responsive Web Design Performance – a few tips from @lukew on how to achieve it http://depot.ly/nJS2M

Coming Clean on Texture http://depot.ly/nI8ou  *Nice article by @JustinMezzell

Freaky, but awesome vision http://depot.ly/nI8i1  The world in 2000 as predicted in 1910

Cool Tumblr: Signs for the homeless http://homelesssigns.tumblr.com

#UX and Scientific Methods: Eyetracking http://depot.ly/nFAbq

This happened: Hashtag creator leaves Google to join a 6-person startup http://depot.ly/nFmLD

Keep Calm & Send Email: Industry Experts Offer Hopeful Outlook On The New Gmail Inbox Tabs http://depot.ly/nFlL9

It’s time to take control of image loading http://depot.ly/nFjhG  via @barrelny

Sass mixin for offsets http://depot.ly/nDiyB  *Good article by @HugoGiraudel

devsdoart.com/  – a compilation of fine works composed by developers

iOS developers, check this out http://depot.ly/nDigd  Designing App Store “screenshots” – by @travisjeffery

 Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

Batch Photo Processing and Watermarking App (Win) – only $15

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Multi-purpose phone

Unfriended boss

Latest technology, maybe in the 80′s

Can you relate to these situations? Please share your funny stories and comments below…

Mega Design Bundle from Inventicons – only $49!

We’ve all seen margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering… until now! But actually (spoiler alert!) absolute centering only requires a declared (variable) height and these styles:

.Absolute-Center {
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }

I’m not the pioneer of this method (yet I have dared to name it Absolute Centering), and it may even be a common technique, however, most vertical centering articles never mention it and I had never seen it until I dug through the comments section of a particular article.

There, Simon linked to this jsFiddle that blew every other method out of the water (the same method was also mentioned by Priit in the comments). Researching further, I had to use very specific keywords to find some other sources for this method.

Having never used this technique before, I put it to the test and discovered how incredible Absolute Centering really is.

Browser Compatibility:

Absolute Centering was tested and works flawlessly in the latest versions of Chrome, Firefox, Safari, Mobile Safari, and even IE8-10. One user reported that the content is not vertically centered in Windows Phone’s browser, but otherwise this technique works as expected.

If you find any additional features or issues, please leave a comment on CodePen.

Within Container

Place your content block inside of a position: relative container to perfectly center your content within the container!

.Absolute-Center {
      width: 50%;
      height: 50%;
      overflow: auto;
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }

Within Viewport

Set your content block to position: fixed and give it a z-index to keep it centered in the viewport.

• Mobile Safari: The content block will be centered vertically in the whole document, not the viewport, if it is not within a position: relative container.

.Absolute-Center.is-Fixed {
      width: 50%;
      height: 50%;
      overflow: auto;
      margin: auto;
      position: fixed;
      top: 0; left: 0; bottom: 0; right: 0;
      z-index: 999;
    }

See the Modal Demo page.

Responsive

Perhaps the best benefit of Absolute Centering is that percentage-based width/heights work perfectly! Even min-width/max-width and min-height/max-height styles behave as expected for responsive boxes.

Go ahead, add padding to the element; Absolute Centering doesn’t mind!

    .Absolute-Center.is-Responsive {
      width: 60%; 
      height: 60%;
      min-width: 400px;
      max-width: 500px;
      padding: 40px;
      overflow: auto;
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }
    

Offsets

If you have a fixed header or need to add other offsets, simply add it in your content block's styles like top: 70px;. As long as margin: auto; is declared, the content block will be vertically centered within the bounds you declare with top left bottom and right.

You can also stick your content block to the right or left while keeping it vertically centered, using right: 0; left: auto; to stick to the right or left: 0; right: auto; to stick to the left.

.Absolute-Center.is-Right {
      width: 50%;
      height: 50%;
      margin: auto;
      overflow: auto;
      position: absolute;
      top: 0; left: auto; bottom: 0; right: 20px;
      text-align: right;
    }

Overflow

Content taller than the block or container (viewport or a position: relative container) will overflow and may spill outside the content block and container or even be cut off. Simply adding overflow: auto will allow the content to scroll within the block as long as the content block itself isn't taller than its container (perhaps by adding max-height: 100%; if you don't have any padding on the content block itself).

.Absolute-Center.is-Overflow {
      width: 50%;
      height: 300px;
      max-height: 100%;
      margin: auto;
      overflow: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }

Images

Images work too! Apply the class/style to the image itself and set height: auto; like you would with a responsively-sized image to let it resize with the container.

Note that height: auto; works for images, but causes a regular content block to stretch to fill the container unless you use the variable height technique. It's likely that browsers have to calculate the height for the rendered image, so margin: auto; ends up working as if you'd declared the height, in all tested browsers.

.Absolute-Center.is-Image {
      width: 50%;
      height: auto;
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }

Variable Height

Absolute Centering does require a declared height, however the height can be percentage-based and controlled by max-height. This makes it ideal for responsive scenarios, just make sure you set an appropriate overflow.

One way around the declared height is adding display: table, centering the content block regardless of content length.

Caveats:

This will break cross-browser compatibility. You may want to consider the Table-Cell method in this case.

• Firefox/IE8: Using display: table aligns the content block to the top, but is still centered horizontally.
• IE9/10: Using display: table aligns the content block to the top left.
• Mobile Safari: The content block is centered vertically, but becomes slightly off-center horizontally when using percentage based widths.

    .Absolute-Center.is-Variable {
      display: table;
      width: 50%;
      overflow: auto;
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }
    

Other Techniques

Absolute Centering works really well for many cases, but there are other methods that may fit more specific needs. The most commonly recommended methods are Negative Margins, Transforms, Table-Cell, and now Flexbox. These techniques are covered more in depth in other articles, so I'll only go over the basics here.

.is-Negative {
            width: 300px;
            height: 200px;
            padding: 20px;
            position: absolute;
            top: 50%; left: 50%;
            margin-left: -170px; /* (width + padding)/2 */
            margin-top: -120px; /* (height + padding)/2 */
    }
          

.is-Transformed { 
    	width: 50%;
    	margin: auto;
    	position: absolute;
    	top: 50%; left: 50%;
    	-webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    }
          

    <div class="Pos-Container is-Table">
      <div class="Table-Cell">
        <div class="Center-Block">
        &lt!-- CONTENT -->
        </div>
      </div>
    </div>
          

.Pos-Container.is-Table { display: table; }
    .is-Table .Table-Cell {
      display: table-cell;
      vertical-align: middle;
    }
    .is-Table .Center-Block {
      width: 50%;
      margin: 0 auto;
    }
          

.Pos-Container.is-Flexbox {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
         -moz-box-align: center;
         -ms-flex-align: center;
      -webkit-align-items: center;
              align-items: center;
      -webkit-box-pack: center;
         -moz-box-pack: center;
         -ms-flex-pack: center;
      -webkit-justify-content: center;
              justify-content: center;
    }
          

Summary

Each technique has its advantages and disadvantages. Which one you choose mainly boils down to which browsers you support and what your existing structure looks like.

Absolute Centering works great as a simple drop-in solution with no-fuss. Anywhere you used Negative Margins before, use Absolute Centering instead. You won't have to deal with pesky math for the margins or extra markup, and you'll be able to size your boxes responsively.

If you need variable height content cross-browser, try out the Table-Cell or Flexbox techniques to see what works best for your site.

(vf)

© Stephen Shaw for Smashing Magazine, 2013.