CENTERING ELEMENTS USING CSS

centering.css

/*
 * CENTERING ELEMENTS USING CSS 
 * <div class="container"><div class="box"></div></div>
*/

/* HORIZONTAL CENTERING USING TEXT ALIGN */

.container{
	text-align: center;
}
.box {
	display: inline-block;
}

/* HORIZONTAL CENTERING USING MARGIN AUTO */
.box {
	margin: 0 auto;
}

/* HORIZONTAL + VERTICAL CENTERING (KNOWN WIDTH AND SIZE) */
.container {
	position:relative;
}
.box {
	position:absolute;
	left:50%;
	top:50%;
	margin-left: -200px; /* .box width is 200px */
	margin-top: -200px;  /* .box height is 200px */
}

/* HORIZONTAL + VERTICAL CENTERING (UNKNOWN WIDTH AND SIZE) */

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