JSFiddle - React, Tailwind, and code Playground

aligning text vertically (IE9+)

by jonchius

HTML

<div class="container">

  <div class="content">

    vertically aligning

  </div>

</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');

* { font-family: 'Source Sans Pro', 'Lucida Grande', Verdana }

    .container {
			height: 200px; width: 300px;	/* simulating container's dimensions (adjust and play with this) */
			background: rgba(0,0,0,0.5);	/* ensure container's visibility (adjust and play with this) */
			color: #fff;					        /* brightening text font (adjust and play with this) */
			display: table;					      /* IMPORTANT: defining container type */
		}

		.content {
			display: table-cell;			    /* IMPORTANT: defining content type (think of this as a 1x1 table) */
			vertical-align: middle;		    /* making vertical centering (!!!) */
			text-align: center;				    /* making horizontal centering (so simple...) */
		}

JavaScript

/* 
[valigner]
centering vertically works in IE9 (which does not allow display: flex)
no javascript needed, just html and css!
*/