Vertically Centering Multiple Lines of Text in CSS

It used to be pretty difficult to vertically center a paragraph of text within its container using CSS.  Fortunately, CSS 3 makes it a bit easier:

p {
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);

Here's an example on JSBin.

Comments (0)

Skip to main content