Full-Screen Overlay Modal Centering with CSS Grid

.modal-overlay {
      position: fixed; /* Position over everything */
      top: 0;
      left: 0;
      width: 100vw; /* Full viewport width */
      height: 100vh; /* Full viewport height */
      background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
      display: grid; /* Use grid for centering */
      place-items: center; /* Shorthand for align-items: center and justify-items: center */
      z-index: 1000; /* Ensure it's on top */
      visibility: hidden; /* Hidden by default */
      opacity: 0; /* Start invisible */
      transition: visibility 0.3s, opacity 0.3s ease; /* Smooth transition */
    }

    .modal-overlay.active {
      visibility: visible;
      opacity: 1;
    }

    .modal-content {
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      max-width: 500px;
      width: 90%;
      text-align: center;
      transform: scale(0.9); /* Start slightly smaller */
      transition: transform 0.3s ease;
    }

    .modal-overlay.active .modal-content {
      transform: scale(1);
    }

    /* --- HTML Structure --- */
    <button id="openModalBtn">Open Modal</button>

    <div id="myModal" class="modal-overlay">
      <div class="modal-content">
        <h2>Modal Title</h2>
        <p>This is the content of the perfectly centered modal.</p>
        <button id="closeModalBtn">Close Modal</button>
      </div>
    </div>

    <!-- JavaScript for demonstration (not part of the core CSS solution) -->
    <script>
      document.getElementById('openModalBtn').addEventListener('click', () => {
        document.getElementById('myModal').classList.add('active');
      });

      document.getElementById('closeModalBtn').addEventListener('click', () => {
        document.getElementById('myModal').classList.remove('active');
      });
      document.getElementById('myModal').addEventListener('click', (e) => {
        if (e.target === e.currentTarget) { // Close when clicking outside content
          document.getElementById('myModal').classList.remove('active');
        }
      });
    </script>