Vertically centering div in css

Question

I want to center align #container following code:

<div id="container">
   <p>new</p>
</div>

css-

#container {
   position:relative;
   width:100%;
   background:red;
   padding:10px;
   float:left;
   margin-left:30%;/*for centering*/
}

p {
    text-align: center; 
}

It does not align center properly with respect to content,please help me.

Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — easwee, Nov 18 '15 at 15:38

score 1 · Answer 1 · answered Nov 18 '15 at 14:29

You want to have a div with 100% and a children with a specific width and margin 0 auto

#body  {
  width: 100%;
  }

#container {
  width:100px;
  background:red;
  padding:10px;
  margin:0 auto;/*for centering*/
}

p {
    text-align: center; 
}

<div id="body">
  <div id="container">
    <p>new</p>
  </div>
</div>

score 0 · Accepted Answer · answered Nov 18 '15 at 14:42

Try This-

#container {
   position:relative;
    width:100%;
    background:red;
    padding:10px;
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    }

    p {
        text-align: center; 
    }

Vertically centering div in css

2 Answers2