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
Solved

center CSS box on screen

Posted on 2007-11-15
3
4,558 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
  • 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Wrapper for APPs 9 84
Placeholder text not disappearing in Contact Form 7 2 23
Changing Color of Page Section 4 23
How to create a textarea which saves text in HTML 8 44
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

809 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