Cheat Sheets

CSS

Created: 2019 December 7th

Updated: 2021 January 27th

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.

<div class="margins">
  <p>Pls center me!</p>
</div>

.margins {
  /* display: flex; */
  display: grid;
}
.margins p {
  margin: auto;
}

<div class="absolute">
  <p>Pls center me!</p>
</div>

.absolute {
  position: relative;
}
.absolute p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

<div class="flexbox">
  <p>Pls center me!</p>
</div>

.flexbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

<div class="grid">
  <p>Pls center me!</p>
</div>

.grid {
  display: grid;
  /* align-items: center; */
  place-items: center;
}

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

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