position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
<link rel="preload" href="fonts/ubuntu/ubuntu-v14-latin-ext_latin_cyrillic-ext_cyrillic-300.woff2" as="font" type="font/woff2" crossorigin><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="OwlCarousel2-2.2.1/dist/assets/owl.carousel.css">
<link rel="stylesheet" href="OwlCarousel2-2.2.1/dist/assets/owl.theme.default.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script src="OwlCarousel2-2.2.1/dist/owl.carousel.js"></script>
<script>
$(".owl-carousel").owlCarousel();
</script>
</body>
</html>
gradientTable();
$(window).resize(function() {
gradientTable();
});
function gradientTable() {
var tableWidth = $(".table--delivery-method").width();
var windowSize = $(window).width();
var widthGradient = $(".table__gradient").width();
var widthWindowWithoutIndentation = windowSize / 100 * 5;
var primaryPositionGradient = windowSize - widthWindowWithoutIndentation - widthGradient;
$(".table__gradient").css("left", primaryPositionGradient + "px");
$(".table__box").scroll(function() {
if($(this).scrollLeft() >= (tableWidth - windowSize + widthWindowWithoutIndentation)) {
$(".table__gradient").fadeOut();
}
else {
$(".table__gradient").fadeIn();
$(".table__gradient").css("left", primaryPositionGradient + $(this).scrollLeft() + "px");
}
});
}var $page = $('html, body');
$('a[href*="#"]').click(function() {
$page.animate({
scrollTop: $($.attr(this, 'href')).offset().top - 60
}, 1000);
return false;
});