Full Screen Centered Title
HTML
<article class="vh-100 dt w-100 bg-dark-pink"> <div class="dtc v-mid tc white ph3 ph4-l"> <h1 class="f6 f2-m f-subheadline-l fw6 tc">Vertically centering things in css is easy!</h1> </div> </article>
css
.dt { display: table; } .dtc { display: table-cell; } .fw6 { font-weight: 600; } .vh-100 { height: 100vh; } .w-100 { width: 100%; } .white { color: #fff; } .bg-dark-pink { background-color: #d5008f; } .ph3 { padding-left: 1rem; padding-right: 1rem; } .tc { text-align: center; } .f6 { font-size: .875rem; } .v-mid { vertical-align: middle; } @media screen and (min-width: 30em) and (max-width: 60em) { .f2-m { font-size: 2.25rem; } } @media screen and (min-width: 60em) { .ph4-l { padding-left: 2rem; padding-right: 2rem; } .f-subheadline-l { font-size: 5rem; } }
Css stats for this component
- Gzipped Size
- 308B
- Selectors
- 14
- Declarations
- 16
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-display tachyons-font-weight tachyons-heights tachyons-widths tachyons-skins tachyons-spacing tachyons-text-align tachyons-type-scale tachyons-vertical-align