Q:

Vertically Centering 2 stacked and nested divs

Ok, so I have a set of divs that I would like to be stacked one on top of another nested inside of another div. I would like these two stacked inner divs to be vertically centered in the parent div, but for the life of me I cannot get them to center. Here is my code:
HTML
<div id="wrapper">
<div id="inner"> 
    <div class="center"><text class="label">Input 1:</text><input type="text"></div>
    <div class="center"><text class="label">Input 2:</text><input type="text"></div>
</div>
<div id="select">
    <select id="selector" multiple>
        <option>Option A</option>
        <option>Option B</option>
        <option>Option C</option>
        <option>Option D</option>
        <option>Option E</option>
        <option>Option F</option>
        <option>Option G</option>
    </select>
</div>

CSS
#wrapper {
    margin: 25px auto;
    width: 50%;
    text-align: center;
    background-color: lightblue;
}
#inner {
    display: inline-block;
    width: 300px;
    height: 100px;
    text-align: right;
    vertical-align: middle;
    background-color: yellow;
}
.center {
    padding: 2.5px 5px;
    display: block;
    background-color: green;
    vertical-align: middle;
}
#select {
    display: inline-block;
    background-color: red;
    vertical-align:middle;
}

And here is a running example:
jsFiddle
I would like to get the two "Center" class divs (the green fields in the jsfiddle) centered vertically inside of the "inner" div (yellow in the example). I have tried everything that I can think of and everything that I could find. I have even tried putting everything inside of one div and making that div display: table-cell; but then the elements aren't centered horizontally. 
So better said, I would like all three elements (the two inputs and the select) both horizontally and vertically centered on the page. How can I do this? Any help would be greatly appreciated! Thank you! 
EDIT:
Ok so I guess I didn't explain myself well enough. I want the yellow div and the red div to be on the same horizontal plane, with the two green divs stacked vertically and vertically centered in the yellow div. Here is an example of what I want. I did this by adding padding-top: 40px; to the .inner div. But I want to achieve this same result without needing to place a hard-coded number of pixels into the padding because I need this to be dynamic and stretch do different sizes and remain centered. Does that make sense? I hope that I did a better job at explaining myself this time. Thank you all for your help! 

A:

I have a few options for you so let's break them all down separately:
Option One: Yellow Be-Gone!
If you read this in the voice of Billy Mays, this could be the option for you! In this option, I have done a few things. First off, let's take a look at the code that was most impacted:
#inner {
    display: inline-block;
    width: 300px;
    text-align: right;
    vertical-align: middle;
    background-color: yellow;
}

If you cannot notice the difference yet, I took out your "height" variable, so that the div will define its own height and effectively take out that yellow space in between. If this isn't your option, that's ok! There are more to come :)
Option Two: Mom said we can keep Ol' Yeller
In a blast from the past, actually, 1957 to be more exact comes this option! In this example, we keep the yellow div and successfully put the inner div in the middle, and have shortened the green width to be only as long as the input is. Let's take a look at the altering code that does this:
#inner {
    width: 300px;
    height: 100px;
    text-align: center;
    vertical-align: middle;
    background-color: yellow;
    display:table-cell;
}
.center {
    padding: 2.5px 5px;
    display: inline-block;
    background-color: green;
    text-align: center;
}

Starting with inner, you will notice that I have added display: table-cell, which enables the display of anything inside of that div to become somewhat similar to a table-cell. To find more information on this neat trick, the Almanac can go more in-depth. I also added in that the text-align should be centered, not right. Aligning the text right, will cause anything inside of this div to align to the right, not just the text, so this is why we change it to be in the middle.
Finally, in center simply add a display of inline-block to top off creating this design, which allows for the div's green background color to stop once everything inside of the div has reached it's max length. I will explain more about this in the third option. Again, both of these methods can be found in the Almanac.
Option Three: The Green Monster
Can you smell Fenway Park in this option? I know I can. This option is similar to option two, but it allows for the inside div to reach the maximum width allotted to it. How do we do this? Check this code out:
.center {
    padding: 2.5px 5px;
    background-color: green;
    text-align: center;
}

It is extremely similar to the code above, in fact, it is the exact same thing set aside from taking out the inline-block display. 
Any of these three options should give you exactly what you are looking for. Something key to point out, be sure that both the light blue and yellow div are the same width, the example you have given us shows that both of these divs are not exactly the same width, so just make sure you catch yourself on that. If none of these are working for you, shoot me a comment and I can try my best to figure something else out for you :)
Good luck and remember to use the Almanac when you can :)

