Div Left & Right But Also Top And Bottom Centred?

So I'm attempting to create this effect where when the window is pulled big enough two divs align side by side but when made smaller the divs stack above each other and centred nea

Solution 1:

I would use display: inline-block, then add text-align: center in the parent element.

JSFiddle: http://jsfiddle.net/gW8r2/1

.parent {
    width: 100%;
    height: 100%;
    border: 1px solid green;
    text-align: center;
}

.parent > div {
    display: inline-block;
}

.a {
    width: 100px;
    height: 100px;
    background: red;
}

.b {
    width: 200px;
    height: 100px;
    background: blue;
}

This is a generalized solution. In your case, .parent would be .hitterbox, .a would be .paraleft, and .b would be .pararight.