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 a custom centering rule.
Open the dialog as a modal
Use showModal() when the dialog should block interaction with the rest of the same document. It places the dialog in the top layer and displays a backdrop. By contrast, show() opens a non-modal dialog. See MDN’s showModal() reference and the MDN dialog element guide.
As an Amazon Associate I earn from qualifying purchases.
<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>Why the default is centered
The HTML Standard’s suggested rendering rules give dialogs automatic margins. For modal dialogs, those rules also specify fixed positioning and zero block insets, allowing the browser’s layout to center the dialog. These are suggested user-agent defaults, not protection against author styles that change them. Read the HTML Standard’s rendering rules.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Fix a dialog that appears off-center
- Inspect the dialog in your browser’s developer tools and check its computed
position,inset, and margins. - Look for global reset styles, component styles, or transforms that override the browser’s defaults. Remove or narrow those rules if they are unintended.
- If custom placement is intentional, define the positioning explicitly and make sure the dialog remains within the viewport. There is no single custom override that suits every layout.
Keep it usable on small screens
Long content or a narrow viewport can make a correctly centered dialog difficult to use. Set maximum dimensions appropriate to the design and allow the dialog to scroll when its content exceeds them.
#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);
}This is an authoring example, not a universal layout prescription. Check how the size constraints behave in your target layout. Style the area behind a modal separately with the ::backdrop pseudo-element; see MDN’s ::backdrop reference.
Centering is only part of dialog behavior
Choose an appropriate initial focus target, and provide an explicit close control. Modal dialogs also support Escape-key dismissal by default. The MDN showModal() documentation discusses focus and modal behavior. A dialog inside an iframe does not make the containing page outside that frame inert.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Browser support
MDN’s compatibility summary says showModal() has been widely available across browsers since March 2022. That summary does not guarantee support in every embedded or legacy browser.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchQuick 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.
