Solved

center CSS box on screen

Posted on 2007-11-15
3
4,564 Views
Last Modified: 2012-06-21
i need to center the CSS alert box on screen in any screen size, possible?


<style>
<!--Message box css-->
div#modalContainer { background-color:transparent; position:absolute; width:100%; height:100%; top:0px; left:0px;  z-index:10000; }
#alertBox { position:absolute; width:300px; min-height:100px; margin-top:50px; margin-left:9em; border:1px solid #000; background-color:#F2F5F6; z-index:12000; }
div#modalContainer > #alertBox { position:fixed; }
#modalContainer #alertBox h1 {color:#fff; margin:0; font-size:0.8em; background-color:#4e9600; border-bottom:1px solid #000; padding:5px; }
#alertBox p { font:0.7em verdana,arial; height:50px; padding-left:5px; margin-left:55px; }
#alertBox #closeBtn { color:#fff; display:block; position:relative; margin:5px auto; padding:3px; border:1px solid #000; width:70px; font-size:0.7em; text-transform:uppercase; text-align:center; background-color:#4e9600; text-decoration:none; }
</style>
0
Comment
Question by:pigmentarts
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 14

Accepted Solution

by:
cezarF earned 500 total points
ID: 20288594
try this....

#alertBox {width:300px; height:200px; position:absolute; top:50%; left:50%; margin:-100px auto auto -150px; border:1px solid #000; background-color:#F2F5F6; z-index:12000; }
0
 
LVL 12

Author Comment

by:pigmentarts
ID: 20289356
perfect, what did you change? thanks.
0
 
LVL 14

Expert Comment

by:cezarF
ID: 20289828
added the following

height:200px;
top:50%;
left:50%;
margin:-100px auto auto -150px;

and removed

min-height:100px;
margin-top:50px;
margin-left:9em;
0

Featured Post

Enroll in June's Course of the Month

June’s Course of the Month is now available! Experts Exchange’s Premium Members, Team Accounts, and Qualified Experts have access to a complimentary course each month as part of their membership—an extra way to sharpen your skills and increase training.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question