Page Structure:
div#help
-- div
-- ul
-- li
-- li
-- div
-- ul
-- li
-- li
-- div.message_shower
-- p /*tiny `x` for close button*/
-- div.content
When a user clicks on any list item <li>, a div.message_shower will open displaying some text.
FIDDLE (Feel free to disregard the JS and HTML tab)
Issue: I am trying to vertically and horizontally center the div.message_shower on the screen. Despite using percentage units, it is not working as expected. Setting margin: 0 auto; did not produce the desired result either. It is important to note that the .message_shower has a z-index of 2.
In a normal screen - centered properly:
Slightly smaller screen - not centered properly:
This is how it should appear properly on a small screen:
Assistance needed specifically for Google Chrome.
Note: The .message_shower should stay within the visible screen area even when scrolling down, without getting hidden.
UPDATE: I will wait for a week, and if no answer successfully centers the div (@mutil's answer only widens the div), I will accept @mutil's answer.