Q: Responsively Center Vert&Hori a Div within another Div w/ width:100% and padding-bottom:100% If you see my Fiddle, you'll know what I mean. If not, I need the "Welcome" div to be vertically and horizontally center to its container div, while responding to the screen size.
<div class="background">
    <div class="welcome">Welcome</div>
</div>

I could get away with setting the position relative and play with the css and be done with it, but I'm in need of a possible jQuery fix. 
The solution can't have absolute positioning.
Don't want to add the jQuery UI plugin for this little problem.

A: Assuming you already know the dimesions of the element you are centering:
.welcome{
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}

By positioning the element absolutely, we can detach it from its surroundings and specify its position in relation to the browser window. Offsetting the div by 50% from the left and the top part of the window, you have its upper-left corner precisely at the center of the page. The only thing we are left to do is to move the div to the left and to the top with half its width and height with a negative margin, to have it perfectly centered.
Updated your fiddle: http://jsfiddle.net/YgQLh/10/

A: You can do this:


*

*First remove padding-bottom and make your div 100% of window:
html,body{
   height:100%;
}
.background {
   height:100%;
}


*Then use this to center the "Welcome" vertically:
.background:before {
   content:" ";
   display:inline-block;
   height:100%;
   vertical-align:middle;
} 

The Fiddle Demo

A: You can do this with a pure CSS solution. The main thing is taking out the 'padding-bottom:72%' in your code and adding in a few more elements. 
DEMO
Let's break it down a little bit by looking at the CSS:
.background {
    background-image: url('http://i.telegraph.co.uk/multimedia/archive/02746/Guy-Whittingham_AI_2746762b.jpg');
    /* padding-bottom: 72%; */
    color: #FFF;
    background-size: cover;
    background-position: center center;
    vertical-align:middle;
    text-align:center;
    width: 350px;
    height: 350px;
    display:table-cell;
}

.welcome {
    font-size: 30px;
    border: solid 5px;
    padding: 15px;
    font-weight: 600;
    display:inline-block;
}

I added a specific width/height to your JsFiddle and then I gave it the background class the display:table-cell; property and your welcome class practically stayed the same. In all essence, I just added in the display method mentioned above and then took out your padding effect.
The other option is to not muck with the height and width at all:
DEMO
This just leaves them as percentages and doesn't add or change anything from the previous example I have given.
EDIT: Here is a JsFiddle with the requested width/height properties.
To give you a better idea of how the display methods work. the Almanac is a great reference.
