Why won't my CSS elements center? - html

Question

I am trying to have my child elements be vertically centered on their parent elements. Something is wrong with my css code but I can't tell what it is:
css:
#parent_div_1, #parent_div_2, #parent_div_3{
width:90%;
height:20%;
margin-right:10px;
border:2px solid #a1a1a1;
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
padding-bottom: 5%;
background:#dddddd;
border-radius:25px;
vertical-align:middle;
margin:4px;
}
.child_div_1{
float:left;
margin-right:5px;
border-radius: 2px;
border:2px solid #a1a1a1;
background:#dddddd;
vertical-align:middle;
}
html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<div id='parent_div_1'>
<div class ='child_div_1'>asd</div>
<div class ='child_div_1'>asd</div>
</div>
<div id='parent_div_2'>
<div class ='child_div_1'>asd</div>
<div class ='child_div_1'>asd</div>
</div>
<div id='parent_div_3'>
<div class ='child_div_1'>asd</div>
<div class ='child_div_1'>asd</div>
</div>
link to my JSFiddle: http://jsfiddle.net/wasingej/Y4FA5/

Answer 1

A quick solution is to set
display: table; for #parent_div_1, #parent_div_2, #parent_div_3
and
display: table-cell; for .child_div_1

Answer 2

Add display: inline-block to the parent div style.
#parent_div_1, #parent_div_2, #parent_div_3{
...
vertical-align:middle;
display: inline-block;
...
}
JSFiddle: http://jsfiddle.net/9Y7Cm/5/

Answer 3

Add Display:inline-block; to your css on #parent_div_1, #parent_div_2, #parent_div_3:
CSS
#parent_div_1, #parent_div_2, #parent_div_3{
width:90%;
height:20%;
margin-right:10px;
border:2px solid #a1a1a1;
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
padding-bottom: 5%;
background:#dddddd;
border-radius:25px;
vertical-align:middle;
margin:4px;
display:inline-block; /* ADDED CSS */
}
.child_div_1{
float:left;
margin-right:5px;
border-radius: 2px;
border:2px solid #a1a1a1;
background:#dddddd;
vertical-align:middle;
}
DEMO HERE: http://jsfiddle.net/Y4FA5/21/

Answer 4

<style>
body{
padding: 0;
margin: 0;
margin:0px auto;
}
#main{
position: relative;
width:500px;
height:500px;
}
#abc{
text-align:center;
background-color:#0F0;
height:250px;
display: table;
width: 100%;
}
#abc span {
vertical-align:middle;
display: table-cell;
}
</style>
<div id="main">
<div id="abc">
<span>asdfasdfafasdfasdf<br/> sdfjdsl flkjdsflk sjdflkjdsf </span>
</div>
</div>