Vertical Auto Margin within a Div - html

Question

I'm now trying another strange and not working thing: the vertical auto alignment of a child div.
I would like the content to be vertically centered within the panel, because the panel have a height in % that fits the window size, it's really important for me to have a strict alignment.
All right, here's my code: JSFiddle
HTML
<div id="panel">
<div id="content">
</div>
</div>
CSS
html, body
{
height: 100%;
background-color: #273034;
margin: 0;
}
#panel
{
height: 100%;
width: 380px;
margin: auto;
background-color: rgba(255,255,255,0.3);
}
#content
{
height: 100px;
width: auto;
background-color: rgba(117,169,56,0.9);
}
Why a so simple thing doesn't work?
Hope someone could help me, I've tried these solutions: margin : auto not working vertically? but it actually didn't make the trick

Answer 1

Here is a simple Solution for vertical aligning, using Pure CSS without fixing any top-margin, top-padding. so its totally responcive.
See this Working Fiddle
HTML: (Same)
<div id="panel">
<div id="content">
</div>
</div>
CSS:
html, body
{
height: 100%;
background-color: #273034;
margin: 0;
}
#panel
{
height: 100%;
width: 380px;
margin: 0 auto;
background-color: rgba(255,255,255,0.3);
}
/*this is new*/
#panel:before
{
content: '';
height: 100%;
margin-left: -5px;
vertical-align: middle;
display: inline-block;
}
#content
{
vertical-align: middle; /*this is new*/
display: inline-block; /*this is new*/
height: 100px;
width: 100%; /*this is new*/
background-color: rgba(117,169,56,0.9);
}