.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 2; } .modal:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: #000; opacity: 0.5; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--base50); min-width: 400px; min-height: 100px; max-width: 100vw; z-index: 1; border: 1px solid var(--base300); padding: 30px; border-radius: 4px; } .header { font-weight: 600; margin-bottom: 20px; } .body { display: flex; flex-direction: column; }