A centered modal dialog built with pure HTML and CSS that presents content in the visual center of the viewport, creating a balanced and neutral focal point without relying on JavaScript or external libraries.
Usage
This component works best for general-purpose dialogs such as confirmations, short messages, simple forms, or user prompts where content should appear clearly separated from the background but without directional motion or stylistic emphasis.
Implementation
The centered layout is achieved using CSS grid or flexbox alignment combined with layered overlays and controlled visibility, ensuring the dialog remains fixed in the middle of the screen regardless of viewport size.
HTML
<div class="ss-modal">
<div class="ss-modal-box">
<h3>Centered Modal</h3>
<p>Content stays perfectly centered.</p>
</div>
</div>CSS
.ss-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,0);
display:flex;
align-items:center;
justify-content:center;
}
.ss-modal-box{
background:#ffffff;
color:#111827;
padding:24px;
max-width:360px;
width:90%;
border-radius:14px;
box-shadow:0 12px 32px rgba(0,0,0,.25);
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
.ss-modal-box h3{
margin-bottom:8px;
}
.ss-modal-box p{
font-size:14px;
color:#4b5563;
}
@media (prefers-color-scheme: dark){
.ss-modal-box{
background:#141414;
color:#e5e7eb;
}
.ss-modal-box p{
color:#9ca3af;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Maintains a neutral, centered visual focus
- Avoids directional or animated bias
- Adapts well to different screen sizes
- Suitable for reusable dialog patterns
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.