Vertical centering – Flexbox solution for text using css

Vertical centering the text using css3 flexbox. Flexbox is the best solution for vertically centered text. css vertical align text will avoid using javascript for achieving the vertical align middle functionality

Vertically Text align using flexbox code below.

Css vertical align text

CSS code

body {
	display: flex;
	align-items: center;
	min-height: 100%;
	margin: 0;
}

html { height: 100% }

main {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 18em;
	height: 10em;
	padding: 1em 1.5em;
	margin: 0 auto;
	box-sizing: border-box;
	background: #655;
	color: white;
	text-align: center;
}

h1 {
	margin: 0 0 .2em;
	font-size: 150%;
}

p {
	margin: 0;
}

body {
	background: #fb3;
	font: 100%/1.5 sans-serif;
}

HTML code

<main>
	Center me, please!
</main>

Demo