Position an absolutely positioned element vertically within its relatively positioned parent (essentially automatically figures out the parent height and adds negative margin of half its own height), works responsively too...
When using MaintainRatio you don't have to set it to be a square (you set a ratio), you can also set an offset.
The example below also shows use of AbsoluteMiddle - this sets an absolutely positioned element vertically to the middle, regardless of its parent size or how big it is (responsive too).
Note: Your 'in the middle' element must be absolutely positioned, and the parent item must be relative.
$('.photo-rect').maintainRatio({
ratio: 1.5,
pixelmod: -20
});
$('.in-the-middle').absoluteMiddle({
pixelmod: 0
});
<div class="photo-rect" style='background-image:url(sample.jpg);'>
<div class="in-the-middle">Im Rectange on Resize and my label is slightly longer</div>
</div>
.photo-rect {
background-size: cover;
position: relative;
}
.in-the-middle {
position: absolute;
width: 100%;
background-color: rgba(0,0,0,0.4);
color: #fff;
text-align: center;
padding: 10px;
}
/*! AbsoluteMiddle for JQuery v1.00 BETA
* http://www.davidjohnfarmer.co.uk/jquery-plugins/absolutemiddle/
* Do not remove any of this notice (you're welcome to use this code in commercial projects)
* Copyright (c) 2016 David John Farmer www.davidjohnfarmer.co.uk
* Licensed under the MIT license */
(function ( $ ) {
$.fn.absoluteMiddle = function(options) {
// DEFAULT OPTIONS
var settings = $.extend({
pixelmod: 0
}, options );
var gettop = function(obj) {
var myheight = $(obj).outerHeight();
var parentheight = $(obj).parent().innerHeight();
var settop = (parentheight/2)-(myheight/2);
if (settings.pixelmod != 0) {
settop += settings.pixelmod;
}
return settop;
}
return this.each(function(i,obj) {
var settop = gettop(obj);
$(obj).css('top',settop);
$(window).resize(function() {
var settop = gettop(obj);
$(obj).css('top',settop);
});
});
};
}( jQuery ));