How to center a div ? Seriously!

.center { height: 100vh; display: flex; align-items: center; justify-content: center; } 

<div class="h-screen flex justify-center items-center"> One does not simply center a div </div> 

window.addEventListener('resize', centerDiv); document.addEventListener('DOMContentLoaded', centerDiv); function centerDiv() { let container = document.querySelector('.center'); let windowHeight = window.innerHeight; let containerHeight = container.offsetHeight; let containerWidth = container.offsetWidth; // Calculate the position to center the div vertically var topPosition = (windowHeight - containerHeight) / 2; // Calculate the position to center the div horizontally var leftPosition = (containerWidth / 2); // Apply the margin to the div container.style.marginTop = topPosition + 'px'; container.style.marginLeft = leftPosition + 'px'; }