How to center a <p> element inside a <div> container?

Question

I want my <p> element to be at the center of a container <div>, as in perfectly centered -- the top, bottom, left and right margins split the spaces equally.

How can I achieve that?

div {    width: 300px;    height: 100px;  }  p {    position: absolute;    top: auto;  }

<div>    <p>I want this paragraph to be at the center, but it's not.</p>  </div>

Answer 1

You dont need absolute positioning Use

p {  text-align: center; line-height: 100px;  } 

And adjust at will...

If text exceeds width and goes more than one line

In that case the adjust you can do is to include the display property in your rules as follows;

(I added a background for a better view of the example)

div {   width:300px;   height:100px;     display: table;    background:#ccddcc;   }   p {   text-align:center;    vertical-align: middle;   display: table-cell;    } 

Play with it in this JBin