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

Issue

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>

Solution

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

Answered By – Fico

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.