banjocode How To Center With CSS

How To Center With CSS

Centering with CSS is actually more difficult than one might think. Here are some different ways to center your elements within a container with CSS and HTML

3 min read

HTML

The basic HTML should look like this.

<div class="parent">
	<div class="child"></div>
</div>

Below are many different methods to center your content with CSS.

Flexbox

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

Position

.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

Grid

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

Table

.parent {
	display: table;
	width: 100px;
	height: 100px;
}
.child {
	display: table-cell;
	vertical-align: middle;
	width: 50px;
	height: 50px;
	text-align: center;
}

Text align

.parent {
	display: block;
	text-align: center;
}
.child {
	display: inline-block; //key point
}

Auto margin

.child {
	width: 50%;
	margin: 0 auto;
}