Cheat Sheets

CSS

Created: 2019 December 7th

Updated: 2019 December 7th

Edit this page on GitHub

Vertically center with margin

You can use margin: auto on both display: flex and display: grid.

It will work on the child of grid or flexbox but not on a block level element.

1<div class="margins">
2 <p>Pls center me!</p>
3</div>
1.margins {
2 /* display: flex; */
3 display: grid;
4}
5
6.margins p {
7 margin: auto;
8}

Vertically center with absolute positioning

1<div class="absolute">
2 <p>Pls center me!</p>
3</div>
1.absolute {
2 position: relative;
3}
4
5.absolute p {
6 position: absolute;
7 top: 50%;
8 transform: translateY(-50%);
9 width: 100%;
10}

Vertically center with flexbox

1<div class="flexbox">
2 <p>Pls center me!</p>
3</div>
1.flexbox {
2 display: flex;
3 align-items: center;
4 justify-content: center;
5}

Vertically center with grid

Use either align-items: center; or place-items: center;

1<div class="grid">
2 <p>Pls center me!</p>
3</div>
1.grid {
2 display: grid;
3 /* align-items: center; */
4 place-items: center;
5}

Breaking Long Words and URLs

There are times when a really long string of text can overflow the container of a layout, use this:

1.don_break_out_of_parent {
2 /* These are technically the same, but use both */
3 overflow-wrap: break-word;
4 word-wrap: break-word;
5}