JSFiddle - React, Tailwind, and code Playground
HTML
<div class="b-block">
<div class="block">
Go!
</div>
</div>
CSS
.b-block{
width:10%;
height:100px;
background: red;
}
.block{
background: #fff;
}
JavaScript
jQuery(document).ready(function($) {
// вызов функции центрирования при готовности DOM
alignCenter($('.block'));
// вызов функции при ресайзе окна
$(window).resize(function() {
alignCenter($('.block'));
})
// функция центрирования элемента
function alignCenter(elem) {
var H = 0;
var B = 0;
H = $(".block").parent().height();
B = $(".block").parent().width();
elem.css({
position : 'absolute',
});
elem.css({
// вычисление координат left и top
left: (B - elem.width()) / 2 + 'px',
top: (H - elem.height()) / 2 + 'px',
});
elem.parent().css({
position : 'relative',
});
}
});