CSS center text (horizontally and vertically) inside a div block

Question

I have a div set to display: block (90px height and width), and I have some text inside.

I need the text to be aligned in the center both vertically and horizontally.

I have tried text-align: center, but it doesn't do the horizontal part, so I tried vertical-align: middle, but it didn't work.

Any ideas?

Answer 1

Try this :

text-align: center;

vertical-align: middle;

line-height: 90px;       /* The same as your div height */

The below code will support multiple lines of text:

position: relative;

top: 50%;

transform: translateY(-50%);

Example: https://jsfiddle.net/wb8u02kL/1/

To shrink-wrap the width use the code given below:

float: left;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

Example: https://jsfiddle.net/wb8u02kL/2/