CSS

Center anything, horizontally and vertically, with 3 lines of CSS:

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

Via Marko ⚡ Denic

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.

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

.margins {
	/* display: flex; */
	display: grid;
}

.margins p {
	margin: auto;
}

Vertically center with absolute positioning

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

.absolute {
	position: relative;
}

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

Vertically center with flexbox

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

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

Vertically center with grid

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;
}

Breaking Long Words and URLs

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;
}