Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Blogs about code

Vertical Centering is Solved.


Every once in a while, I see a passing reference to how impossible it is to center something vertically using CSS. But vertical centering isn't difficult, not anymore. Here are some methods for vertical centering using only CSS (even on elements of unknown height) which are completely feasible for most sites.


Flexbox makes it dead simple to vertically center an element. Assuming you've got a height (even in % or rems), just throw display: flex; on the outer element, and margin: auto; on the inner element. This uses the flexbox mode, which is pretty well supported as of IE11, Firefox 33, Chrome 11, iOS Safari 7.1, and Android Browser 4.4.


The 2D transforms offer wider browser support (adding IE9, IE10 and Android Browser 4.1+) and a slightly more complex implementation. Put any height and position: relative; on the outer element, and these specifications on the inner element. This still works when the inner element is using an unspecified (or auto) height. Example:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

In case you need even more options or details on these solutions, I've detailed more methods here on Codepen.

CSS Hacks.


In the past, I've used CSS hacks * and _ as a quick and dirty way to make a few CSS changes for IE6 and IE7 only , while preferring conditional comments for larger scale adjustments.

When IE8 came out, developers used another CSS hack (\9;) to target just IE8. But when IE9 came out, it also rendered \9; hacks, which made it the perfect example of an unsafe CSS hack.

Since then, things have only gotten messier for CSS hacks. There are tons of new browsers out there, and IE10 was the last IE to support conditional comments. While CSS selectors still remain fairly ugly, sometimes they're just the tool you need. Fortunately, Browserhacks has pulled all the hacks from all over the internet into one place. And it's on GitHub - so you can add to it.

CSS Magic - border-box.


With the May 9th 2014 release of Firefox 29, un-prefixed box-sizing is very widely supported by modern browsers; and it's even supported in IE as far back as IE8.

Border box harkens back to the old days of IE, when it incorrectly rendered the box model of an element by including its padding and border in a width. Actually, this "broken" box model is pretty handy - it allows a developer to simply set a width (for example, of 20% for 5 elements inside a parent), use border and padding of any units, and still have everything fit.

Here's an example where box-sizing: border-box; is applied to the second list:

ul li {
  width: 20%;
  border-right: solid black 5px;
  padding: .25em;
  list-style: none;
  float: left;
} li {
  box-sizing: border-box;

Here's a live demo of box-sizing: border-box;. The Mozilla Developer Network has the details on box-sizing.

Notes - Intro to Node.


Several months ago I went to a 3 hour Intro to Node.js workshop through Meetup by Ryan Eastridge of Formidable Labs. Here are the notes I took. Beware - without Ryan's walk-though, some of the stuff here doesn't make much sense.

Node's strength is asynchronicity - there is no halt while waiting for a response.

$ node [filename]    #execute that file
$ localhost:8000     #from NOT Node console
var fs=require("fs");
fs.writeFileSync("hw.txt", "Hello World");
#Possible, but use async and callbacks.

Modules installed during workshop: Express, Request, Cheerio. Other useful modules: easyxdm,, simonl. Also; to avoid callback hell - set up in series.

Shouter: process.stdin.resume(); #Don't exit, wait for input

CSS for Variable Height Elements in a Grid.


Assume that you need to build a grid with multiple elements using CSS and HTML, where the height of each element varies due to different lengths of content. I think of this as "The CD Problem", displaying a list of CD covers with wildly different album titles. If you just float each element left, then the taller elements will break the grid and your whole layout: Broken grid of HTML elements

This is the solution to the breaking grid:

li:nth-child(4n+1) { clear:left; } That CSS says to clear: left; every 4th li (after the 1st one). clear: left; causes the element to force a new grid row to start.

Here is some example HTML:

    <h4>Bacon ipsum dolor</h4>
    <img src="" />
    <p>Sit amet short ribs pork chop sandwhich pork belly</p>
    <h4>Pastrami andouille</h4>
    <img src="" />
    <p>Boudin chuck ground round</p>

And the CSS:

li:nth-child(4n+1) {

li {
  width: 20%;
  margin: 0 .5rem .5rem 0;
  padding: 1%;
  float: left;
  border: solid black 1px;
  text-align: center;

ul {
  list-style: none;
  padding: 0;
  font-size: small;

img {
  max-width: 100%;

h4 {
  margin: .5rem;
  text-transform: capitalize;

p {
  margin: .5rem;
  text-align: left;

You can fiddle with a live example on CodePen.

More blogs about code: