środkowanie treści w responsywnym kwadratowym bloku

.porto-single-full{
width:50%;
float:left;
overflow: hidden;
padding-bottom: 50%;
position: relative;
background-color:red;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.img-content{
height: 90%;
padding: 5%;
position: absolute;
width: 90%;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}

http://jsfiddle.net/webtiki/MpXYr/4/
http://jsfiddle.net/webtiki/MpXYr/3/embedded/result/

responsywne środkowanie bloku względem okna przeglądarki:
kod html:

    <div class="mainBox--full">
      <div class="mainBox--inner">
        <div class="mainBox--table">
          <div class="mainBox--cell">
            <h1>Wedding menu</h1>
            <h4>save the date</h4>
            <h2>06.08.2016</h2>
          </div>
        </div>
      </div>
    </div>

css/less kod:

.mainBox {
  &--full {
    border: solid 1px @baseWhite;
    margin: 0 auto;
    width: 500px;
    height: 500px;
    overflow: hidden;
    position: relative;
    // width: 30%;
    // padding-bottom: 30%;
  }
  &--inner {
    height: 100%;
    padding: 5%;
    position: absolute;
    width: 100%;
  }
  &--table {
    display: table;
    height: 100%;
    width: 100%;
  }
  &--cell {
    display: table-cell;
    vertical-align: middle;
  }
}

js kod:

$(document).ready(function() {

	//Welcome Block Vertical Align
	myVerticalAlign();

});


jQuery(window).resize(function(){

	//Welcome Block Vertical Align
	myVerticalAlign();

});


//Welcome Block Vertical Align
function myVerticalAlign() {
	var body_h = $(window).height();
	var container_h = $('.mainBox--full').height();
	var marg_top = Math.abs((body_h - container_h)/2);
	$('.mainBox--full').css('margin-top', marg_top);
}

—