This project is here in case you do not want to use css grid in every single project.
Vertically align items center with confidence!

see it live here: michaeldimmitt.github.io/css-center-without-grid

Absolute Positioning

absolute positioning is used in this project to ensure the spans do not fight with each other.

Position Relative

use position relative if you want child elements to behave like normal.

see it live here: michaeldimmitt.github.io/css-center-without-grid

Tweet about vertically aligning elements without css grid:

css center without grid:

<div style="
height:100vh;
">
<span style="

height: 10vh; width: 10vw;
background-color: aqua;

display: block;
position: relative;

top: 50%; left: 50%;
transform: translate(-50%,-50%);
">
</span>
</div>

— MichaelDimmitt (@m_dimmitt) September 7, 2019

Tweet about using grid to vertically align elements:

My favorite way to organize a page vertically @letslunchpool.
display: grid;
grid-template-rows: auto auto 1fr auto;
max-height: 100vh;

As a hotsauce commercial mentions:
I put that sh*t on everything#css #grid#flexbox everything else.

Whats your whitespace strategy?

— MichaelDimmitt (@m_dimmitt) May 15, 2019

Both methods are worth using,😅 hopefully you find these helpful additions to your toolbox.