Write once, use many for dialog box CSS of varying content - html

Question

I've written a web-app for an in-house resource for my fellow employees, and part of the base template is a simple dialog box - a hidden div, between the body and the header with an absolute position that appears when a button (another div) is clicked, displays content based on the clicked button, and goes away when the X in the corner is clicked. You know the routine.
So I suspect that I should not have to do this, but I find that I have not yet been able to describe the CSS of the dialog box in the base template's CSS such that I can ensure its position on the screen is always more or less the same. It seems instead that, as the dimensions of the content of the dialog box change per page, this requires that I redefine the dialog box's margin-left and margin-right on any given page.
For example, my base css for the dialog box is such, and it is loaded with the base html template every time:
#dialogBox {
position: absolute;
border: 4px solid;
border-radius: 15px;
cursor: default;
text-align:center;
z-index:1000; /*always on top*/
padding: 10px 0 10px 0;
font-size: 36px;
}
Note the lack of a margin - I've not found a single margin value that does the job without causing a vicious mismatch of the size of the dialog box to the content within. For example, on a page where the content is expected to be quite large, I've set the margin as such:
#dialogBox {
margin: 5% 10% 0 10%;
}
If the content is expected to be much lighter, however, it seems that the margin needs to be set again on the next page I load, in order to circumnavigate visual shenanigans:
#dialogBox {
margin: 5% 33% 0 33%;
}
This is Not A Big Deal, but it is repetitive. I'm certain there's a better way to do it, such that the div will just naturally expand and maintain equal margin-left and margin-right on any given page its on, while maintaining a 'Goldilocks' size for its content - not too big, not too small, always just right.
I realize that there is existing infrastructure within some of the jQuery libraries for 'nice-looking' dialog boxes - they even drag around the screen and do tricks - but this is just for an in-house, employees-only web-app so I just haven't any interest in that. Also, it's good to know how to build some things yourself, right? I'm a little too new at this to cheat and just steal a bunch of CSS, so I'm trying to come by the knowledge honestly.
If I've left out any code which is germane to the issue, I'm more than happy to edit my post.
EDIT - I have two excellent answers regarding placing the dialogBox in a containing div - and the only reason I haven't flatly accepted them is just because it looks like I may end up needing to redefine aspects of the dimensions on each page in spite of some one-and-done code. Which is probably my fault, because the information on different pages is a little too different, and I would like to avoid forcing my users to scroll the page if necessary. Setting the width of the dialogBox per-page lets me do that; I dunno if leaving it up to CSS will let me do that.
FINAL EDIT - I believe for now that the accepted answer is the best solution for my project.

Answer 1

I'm not sure you can solve this without adding another container. With a wrapper you can make that position: absolute; instead and then center inside it, without the need for negative margins etc.
html
<div class="container">
<div id="dialogBox">content of whatever size here</div>
</div>
css
.container {
height: 0; /* hide/ make unclickable if necessary */
left: 0; right: 0; /* full width */
text-align: center; /* center inline content */
position: absolute;
}
#dialogBox {
/* make div stretch to its content and allow centering */
display: inline-block;
/* reset the inherited text-align */
text-align: left;
}
This way you don't need to care about the width of the dialog box.
Demo at http://jsfiddle.net/9wcFb/
Alternatively, you can also use margin: auto; when the container is the absolutely positioned one. http://jsfiddle.net/9wcFb/1/
Sidenote: as this #dialogBox is likely depending on JavaScript anyway, if you don't like the extra markup it is entirely possible to add it using the script, although I'd argue that would be a case of over-engineering ;)

Answer 2

Is setting a width on the dialog box an option?
If it is, you can set the left property to 50% and the margin-left property to -(width/2)
See here:
http://jsfiddle.net/tY7ef/
#dialogBox {
position: absolute;
border: 4px solid;
border-radius: 15px;
cursor: default;
text-align:center;
z-index:1000;
/*always on top*/
padding: 10px 0 10px 0;
font-size: 36px;
left: 50%;
margin-left: -200px;
width: 400px;
}
You can use percentages too:
width: 60%;
margin-left: -30%;
auto margins won't typically work with absolute positioned elements: http://www.sitepoint.com/css-center-position-absolute-div/

Answer 3

You can try using an auto margin, this way the div's should be centerd automaticly
#dialogBox {
margin: 5% auto 0;
}

Answer 4

I can think of two quick methods to do this depending on whether or not you know the width of the element
If you know the width
If you know the width of your div, set the distance from the left side of the screen and subtract half of the width in a margin.
Say your screen is this wide:
/*
Legend:
Edge of screen: |
Center of element: .
Beginning of div: [
End of div: ]
*/
| . |
| .{center} |{size:56 characters}
And you have a div of this width:
[---I am .a div---]{size:16 characters}
In order to center it using this method, we would set the distance from the left side to half of the screen (left: 50%;):
| .[---I am .a div---] |
| . |
And then subtract the extra distance in the margin, 50% of the total size of the div or, in our case 8 characters. (margin-left:-8 characters;):
| [---I am .a div---] |
| . |
We now have a centered div.
This will work with any width-type you use (px, %, em...) as long as you move the div back to the left exactly half of its width.
#dialogBox{
width:70%;
left:50%;
margin-left:-35%; /*half of 70%*/
}
#dialogBox{
width:100px;
left:50%;
margin-left:-50px; /*half of 100px*/
}
#dialogBox{
width:202em;
left:50%;
margin-left:-101em; /*you get the picture*/
}
Fiddle
If you don't know the width.
Make a new div which will act as a container for your dialogue box. Set the left: value of this container div (position:absolute;) to 50% and subtract 50% from the left: value of your dialogue div (now position:relative;).
We have a div within a div:
[[---I am .a div---]]{size:still 16 characters}
/*
It is important to note that the width of the outer div
will always be equal to the width of the inner div
unless defined otherwise.
*/
If we set our container div (C) to be 50% from the left of the screen (left: 50%) then we get:
CD DC
| .[[---I am .a div---]] |
| . |
Now, we set the left of our dialogue box div (D) to -50% (subtracting 50% of the width of the parent element which in this case is exactly 50% of the width of the dialogue box.)) and get:
D C D C
| [---I am .[a div---] ] |
| . |
This effectively centers the dialogue box without knowing its width.
#container{
position: absolute;
left:50%;
}
#dialogBox{
position: relative;
left:-50%;
}
Fiddle
I made the container div red in the example so that you can see how it is working.