Legend
Container
Item
Centered Page Layout Options
Margin Auto
max-width: 1000px;
margin: 48px auto;
Side by Side Layout Options
Inline-Block
display: inline-block;
width: 100px;
display: inline-block;
width: 100px;
Flexbox - default behavior
Flexbox - flex item behavior
Center Alignment Options
Text-Align
text-align: center;
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Flexbox (row) - justify-content (center)
display: flex;
justify-content: center;
Flexbox (column) - align-items (center)
display: flex;
flex-direction: column;
align-items: center;
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Positioning Options
Apart
display: flex;
justify-content: space-between;
Custom Positioning (recommended only for large containers like heroes)
position: relative;
position: absolute;
left: 0px;
top: 25%;
position: absolute;
bottom: 0px;
right: 0px;