CSS vertical align inside a FIXED position div - html

Question

I have a header: FIXED position.
Here is css:
#header{
position:fixed;
height: 6em;
display:block;
width: 100%;
background: rgba(255, 255, 255, 1);
z-index:9;
text-align:center;
color: #000000;
}
And inside, I want to center text middle and vertical middle.
Here is what I have so far, but it's not working. All example online shows with an absolute position as the container, but it's not working with the fixed one.
HTML:
<div id="header">
<div id="bandname">Bewolf Photography</div>
<div id="insta"><img src="imgs/insta.png" width="40" alt="tablets" /></div>
<div id="bandname">Bewolf Photography</div>
</div>
CSS for text and image:
#bandname
{
display: inline-block;
font-size: 2.8em;
padding: 0px 0px 0 0;
vertical-align: middle;
background: rgba(0, 255, 0, 1);
}
#insta {
display: inline-block;
padding: 0px 0px 0px 50px;
vertical-align: middle;
}
I just can't figure that one out...
I tried using
line-height: 6em;
Help would be appreciated.. .thanks
but that doesn't work either.

Answer 1

Use the pseudo element vertical centre trick.
#header:before brings the inline elements down to the centre. The direct children of header are given display: inline-block and vertical-align: middle to keep a straight line.
Read more about pseudo elements here.
This technique basically adds a "div" before the rest of your content. (It can be replaced with a real <div> if you really need this to work in IE7 and below. [Don't bother!] ). It basically looks like this:
<div class="header">
<!-- added by css -->
<div>I am :before and you will all do as I say! To the middle, plebs!</div>
<!-- end css content -->
<div>Yes master!</div>
<div>Anything you say sir!</div>
</div>
Working Example
Note: I removed the div from around the image. It seems unnecessary, but can be placed back in if needs must. Also, I have targeted only the direct children of #header using the direct children selector: >. Here is a huge list of CSS selectors.
#header {
position: fixed;
height: 6em;
display: block;
width: 100%;
background: rgb(0, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(0, 255, 255, 1);
z-index: 9;
text-align: center;
color: #000000;
top: 0px;
}
#header:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
#header > div,
#header > img {
display: inline-block;
font-size: 2.8em;
padding: 0px 0px 0 0;
vertical-align: middle;
}
<div id="header">
<div id="bandname">Test</div>
<img src="http://www.placehold.it/50" width="40" alt="tablets" />
<div id="bandname">test</div>
</div>

Answer 2

The easiest solution is to have the following css for it's content.
#header .wrapper
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Since there are multiple children, it's better to wrap them around a wrapper div. Here's the working example:
http://jsfiddle.net/zf987w0b/1/

Answer 3

You can use the properties left, right, top and bottom, set em to 50% for example, and them use the transform property to translate the element -50% of itself to perfectly center it. Sounds confuse but i made a fiddle: http://jsfiddle.net/zzztfkwu/ Will this work?
EDIT: http://jsfiddle.net/kbh97n82/1 updated fiddle with .wrapper solution.