1. CSS Code Demos

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!


Do you like CV's articles? Follow on social!
Comments to: Vertical centering – Flexbox solution for text using css

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

    Attach images - Only PNG, JPG, JPEG and GIF are supported.