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.