vertical centering
DESCRIPTION
TRANSCRIPT
![Page 1: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/1.jpg)
Vertical Centering for fun and profit
Vertical Centering for fun and profit
Andrew Jaswa@ajaswa
![Page 2: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/2.jpg)
Hello!Hello!
![Page 3: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/3.jpg)
Vertical CenteringVertical Centering
Fun+
Profit
![Page 4: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/4.jpg)
Vertical CenteringVertical Centering
1. Vertical-center
2. ???
3. Profit
How we get to profit
![Page 5: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/5.jpg)
Vertical CenteringVertical Centering
Where we started
![Page 6: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/6.jpg)
Vertical CenteringVertical Centering
<font size=’50’> </font>
Centered?<font
size=’50’> </font>
![Page 7: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/7.jpg)
Vertical CenteringVertical Centering
<br><br>
Centered?<br><br>
![Page 8: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/8.jpg)
Vertical CenteringVertical Centering
<img src=‘spacer.gif’>
Centered?<img
src=‘spacer.gif’>
![Page 9: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/9.jpg)
Vertical CenteringVertical Centering
<td valign=‘middle’>
Centered?</td>
![Page 10: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/10.jpg)
Vertical CenteringVertical Centering
<td valign=‘middle’> (╯°□°)╯︵ ┻━┻
</td>
![Page 11: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/11.jpg)
Vertical CenteringVertical Centering
Current Centering
![Page 12: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/12.jpg)
Vertical CenteringVertical Centering.class { position: relative;}
.class .child { height: 100px; margin-top: -50px; position: absolute; top: 50%;}
![Page 13: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/13.jpg)
Vertical CenteringVertical Centering
.class { height: 100px; }.class .child { margin: 40px 0 0;}
![Page 14: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/14.jpg)
Vertical CenteringVertical Centering
.class { height: 50px; line-height: 50px;}
![Page 15: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/15.jpg)
Vertical CenteringVertical Centering
New(ish) hottness
![Page 16: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/16.jpg)
Vertical CenteringVertical Centering
.class { display: table; height: 100%;}.class .child { display: table-cell; vertical-align: middle;}
![Page 17: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/17.jpg)
Vertical CenteringVertical Centering
![Page 18: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/18.jpg)
Vertical CenteringVertical Centering.class:before { content: ‘’; display: inline-block; vertical-align: middle; height: 100%;}.class .child { display: inline-block; vertical-align: middle;}
![Page 19: Vertical centering](https://reader033.vdocuments.net/reader033/viewer/2022061209/548cfaedb47959001a8b4642/html5/thumbnails/19.jpg)
Vertical CenteringVertical Centering
QuickTime™ and aGIF decompressor
are needed to see this picture.