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

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 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

Solution 2:

To get left/right centering, then applying text-align: center to the div and margin: auto to the p.

For vertical positioning you should make sure you understand the different ways of doing so, this is a commonly asked problem: Vertical alignment of elements in a div

Solution 3:

♣you should do these steps :

1. the mother Element should be positioned(for EXP you can give it position:relative;)
2. the child Element should have positioned "Absolute" and values should set like this: top:0;buttom:0;right:0;left:0; (to be middle vertically)
3. for the child Element you should set "margin : auto" (to be middle vertically)
4. the child and mother Element should have "height"and"width" value
5. for mother Element => text-align:center (to be middle horizontally)

♣♣simply here is the summery of those 5 steps:

.mother_Element {
    position : relative;
    height : 20%;
    width : 5%;
    text-align : center
    }
.child_Element {
    height : 1.2 em;
    width : 5%;
    margin : auto;
    position : absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    }