Home / Frontend Codes and Demos / CSS Code Demos / 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

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; }

{loadposition position-9}

HTML code

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

Demo

About CV

I'm frontend developer

Check Also

Naturalized Checkbox Toggle Switches

This demo is a response to a post by Marcus Connor addressing confusion with checkbox …