How to center a paragraph element inside a div container?

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

enter image description here

Leave a Comment