display div horizontally and vertically center inside parent div? - css

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