display div horizontally and vertically center inside parent div?

Question

I am wanting to know how I can horizontally and vertically center a div inside a parent div.

At the moment my div is horizontally vertical but not vertically horizontal.

Please can someone show me where i am going wrong? thanks

Desired Result:

|- - - - - - - - -
|                 |
|      [   ]      |
|                 |
|                 |
 - - - - - - - - - 

HTML:

<div class="primary_container"> 

<div class="home_column" id="login_box"></div>

</div>

CSS:

.primary_container{
    width:900px;
    height:100%;
    position:relative;
    margin:auto;
   background: rgba(230, 155, 0, 0.7); 
    text-align:center;
  z-index:2;

}


.home_column{ 
    width: 30%;
    margin: 0 auto;
    min-height:240px;
    text-align:center;
     position:relative;
     background: rgb(0, 0, 0); /* The Fallback */
   background: rgba(138, 138, 138, 0.2); 
    border: 1px solid #666666;
 -webkit-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
-moz-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
cursor:pointer;
cursor:hand;
text-shadow: 0px 2px 3px #999;
color:#000;
padding-top:20px;
padding-bottom:20px;
z-index:2;

}

Answer 1

.home_column{ 
    width: 30%;
    margin: auto;
    max-height:240px;
    text-align:center;
     background: rgb(0, 0, 0); /* The Fallback */
   background: rgba(138, 138, 138, 0.2); 
    border: 1px solid #666666;
 -webkit-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
-moz-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
cursor:pointer;
cursor:hand;
text-shadow: 0px 2px 3px #999;
color:#000;
padding-top:20px;
padding-bottom:20px;
z-index:2;

position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;


}

use position absolute, and give the child div a max height.

I will also suggest look into the link below, this give complete detail on how to center a div at any given situatiton

https://css-tricks.com/centering-css-complete-guide/

https://css-tricks.com/centering-in-the-unknown/

I hope it was helpful.

Answer 2

My favorite way to center elements is by using display: flex. All you have to do is apply three attributes to your parent / containing class.

Here is a basic working jsFiddle example.

css:

.parent{
    display:flex;
    display:-webkit-flex;
    justify-content:center;
    align-items:center;
    //...more styles
}

---

Here's your code updated with flexbox:

.primary_container{
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    align-content:center;
    justify-content:center;
    width:900px;
    height:100%;
    background: rgba(230, 155, 0, 0.7); 
    text-align:center;
    z-index:2;
}


.home_column{ 
    display:-webkit-flex;
    display:flex;
    align-content:center;
    justify-content:center;    
    width: 30%;
    min-height:240px;
    background: rgb(0, 0, 0); /* The Fallback */
    background: rgba(138, 138, 138, 0.2); 
    border: 1px solid #666666;
    -webkit-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
    -moz-box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
    box-shadow: 0 2px 2px rgba(153, 153, 153, .25);
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    cursor:pointer;
    cursor:hand;
    text-shadow: 0px 2px 3px #999;
    color:#000;
    z-index:2;
}

Here's a working fiddle with your modified code:

jsFiddle

Learn more about flexbox on css-tricks

note: browser support