Align divs horizontally to the center - html

Question

I've got this short code:
#div1 div {
margin: 0% 0,5%;
display: inline-block;
color: white;
border: 1px dotted yellow;
align: center;
}
#div1 {
margin: 0px auto;
width: 620px;
height: 100px;
background-color: black;
overflow: hidden;
text-align: center;
}
#div2, #div10 {
width: 21px;
height: 100px;
}
#div3, #div9 {
width: 60px;
height: 60px;
}
#div4, #div8 {
width: 70px;
height: 70px;
}
#div5, #div7 {
width: 77px;
height: 77px;
}
#div6 {
width: 85px;
height: 85px;
}
<div id="div1">
<div id="div2">Content2</div>
<div id="div3">Content3</div>
<div id="div4">Content4</div>
<div id="div5">Content5</div>
<div id="div6">Content6</div>
<div id="div7">Content7</div>
<div id="div8">Content8</div>
<div id="div9">Content9</div>
<div id="div10">Content10</div>
</div>
I would like to be able to horizontally align these divs so they are not aligned to the top of my main div but to the center.
I tried it many different ways, such as padding, margin, but i wasn't able to figure out how to do it.
Do you have any idea?

Answer 1

Just add vertical-align:middle; on the rule above:
CSS
#div1 div {
margin: 0% 0,5%;
display: inline-block;
color: white;
border: 1px dotted yellow;
align: center;
vertical-align: middle;
}
DEMO HERE

Answer 2

Hey if you are having some confusion or problem of using vertical-align:middle you can go through below example
I have added a new div inside of div with id div2 to div10 and updated css
#div1 > div {
display: inline-block;
align: center;
margin: 0% 0, 5%;
position: relative;
top: 50%;
}
#div1 > div[id] > div {
transform: translateY(-50%);
color: white;
border: 1px dotted yellow;
}
#div1 {
margin: 0px auto;
width: 620px;
height: 100px;
background-color: black;
overflow: hidden;
text-align: center;
}
#div2 > div, #div10 > div {
width: 21px;
height: 100px;
}
#div3 > div, #div9 > div {
width: 60px;
height: 60px;
}
#div4 > div, #div8 > div {
width: 70px;
height: 70px;
}
#div5 > div, #div7 > div {
width: 77px;
height: 77px;
}
#div6 > div {
width: 85px;
height: 85px;
}
<div id="div1">
<div id="div2">
<div>
Content2
</div>
</div>
<div id="div3">
<div>
Content3
</div>
</div>
<div id="div4">
<div>
Content4
</div>
</div>
<div id="div5">
<div>
Content5
</div>
</div>
<div id="div6">
<div>
Content6
</div>
</div>
<div id="div7">
<div>
Content7
</div>
</div>
<div id="div8">
<div>
Content8
</div>
</div>
<div id="div9">
<div>
Content9
</div>
</div>
<div id="div10">
<div>
Content10
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/9tdzqvot/