htmlcsstextcentering

How to center a paragraph element inside a div container?


I want my paragraph 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