iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A native HTML <dialog> opened with showModal() is centered by the browser’s suggested default rendering. If it appears off-center, check for CSS that overrides its position, insets, or margins before adding custom positioning. Add size and scrolling limits so long content also fits smaller screens.
Open a native dialog with showModal()
The HTML Standard’s suggested rendering gives a dialog automatic margins; for a modal dialog, it also specifies fixed positioning and zero block insets. These defaults usually center the modal without manual positioning CSS, but author styles can override them. WHATWG HTML Standard: Rendering.
<button id="open">Open dialog</button>
<dialog id="example">
<p>Dialog content</p>
<button id="close">Close</button>
</dialog>
<script>
const dialog = document.querySelector("#example");
document.querySelector("#open").addEventListener("click", () => dialog.showModal());
document.querySelector("#close").addEventListener("click", () => dialog.close());
</script>showModal() places the dialog in the top layer, displays a backdrop, and makes the rest of the same document inert while it is open. By contrast, show() opens a non-modal dialog, leaving the surrounding page interactive. Use the modal method when users should not interact with the page behind the dialog. MDN: showModal().
Keep the dialog usable on small screens
Centering does not prevent a tall or wide dialog from exceeding the viewport. Set maximum dimensions and allow the dialog content to scroll when necessary. These CSS values are an example starting point; adjust them for your layout and check the result at the viewport sizes your interface supports.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
dialog {
max-width: min(42rem, calc(100vw - 2rem));
max-height: calc(100vh - 2rem);
overflow: auto;
}
dialog::backdrop {
background: rgb(0 0 0 / 0.45);
}The Standard’s suggested modal rendering includes maximum sizing and overflow behavior, while the example above expresses explicit author styles. The ::backdrop pseudo-element styles the layer behind a modal dialog; it is separate from the dialog’s own appearance. MDN: ::backdrop.
Fix a dialog that is not centered
Inspect the dialog’s computed styles and the rules that match it, including global resets and component styles. Look for declarations that change the browser’s positioning defaults:
position, which can replace fixed positioning;insetor its block-direction properties, which can change how the dialog is placed;margin, which can replace automatic margins; andtransform, which can visually shift the dialog.
Remove or narrow the conflicting rule if the browser’s default centering is what you want. If custom placement is intentional, define it explicitly and check that the dialog remains inside the viewport. There is no single custom CSS override that suits every layout; the right rule depends on which style is changing the default.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsSupport focus and dismissal
Centering handles placement, not the interaction details of a useful dialog. Choose an appropriate initial focus target, using autofocus where it makes sense, and provide a visible close control. Modal dialogs opened with showModal() also support dismissal with Escape by default. MDN: showModal().
MDN describes showModal() as widely available across browsers since March 2022; that broad compatibility summary does not guarantee support in every embedded or legacy browser. A modal opened inside an iframe makes the rest of that document inert, but does not block interaction with the iframe’s containing page. MDN: showModal().
Quick Recap
Best Value
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
