Vertical centering

Vertical Centering for fun and profit

Vertical Centering for fun and profit

Andrew Jaswa@ajaswa

Hello!Hello!

Vertical CenteringVertical Centering

Fun+

Profit

Vertical CenteringVertical Centering

1. Vertical-center

2. ???

3. Profit

How we get to profit

Vertical CenteringVertical Centering

Where we started

Vertical CenteringVertical Centering

<font size=’50’>&nbsp;</font>

Centered?<font

size=’50’>&nbsp;</font>

Vertical CenteringVertical Centering

<br><br>

Centered?<br><br>

Vertical CenteringVertical Centering

<img src=‘spacer.gif’>

Centered?<img

src=‘spacer.gif’>

Vertical CenteringVertical Centering

<td valign=‘middle’>

Centered?</td>

Vertical CenteringVertical Centering

<td valign=‘middle’> (╯°□°）╯︵ ┻━┻

</td>

Vertical CenteringVertical Centering

Current Centering

Vertical CenteringVertical Centering.class { position: relative;}

.class .child { height: 100px; margin-top: -50px; position: absolute; top: 50%;}

Vertical CenteringVertical Centering

.class { height: 100px; }.class .child { margin: 40px 0 0;}

Vertical CenteringVertical Centering

.class { height: 50px; line-height: 50px;}

Vertical CenteringVertical Centering

New(ish) hottness

Vertical CenteringVertical Centering

.class { display: table; height: 100%;}.class .child { display: table-cell; vertical-align: middle;}

Vertical CenteringVertical Centering

Vertical CenteringVertical Centering.class:before { content: ‘’; display: inline-block; vertical-align: middle; height: 100%;}.class .child { display: inline-block; vertical-align: middle;}

Vertical CenteringVertical Centering

QuickTime™ and aGIF decompressor

are needed to see this picture.

Vertical CenteringVertical Centering

Thanks!

Andrew Jaswaandrew.jaswa@factorylabs.com