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

	Center me, please!


Latest posts by W3TWEAKS (see all)


Leave a Reply

Your email address will not be published. Required fields are marked *