Hand-picked HTML and CSS code examples, tutorials and articles
CSS Gallery, jQuery plugins

Vertical centering - Flexbox solution for text using css

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

Advertisement