Question

I’m trying to display an alert when a user clicks a button but can’t figure out how to horizontally center an alert. I’d like the alert to stay within #main. See this fiddle.

thanks!

Answer 1

Your markup and CSS positioning is actually wrong, instead of using position: fixed; use position: relative; for #main and position: absolute; for #message and also shift your message div in #main div

And about the calculation part, when you want to center a div, you’ve to give top: value (-)minus height of the div to bring it vertically center..

My Fiddle