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