How to center and vertical a fixed container that contains multiple containers

1

Heya, I have a question about div containers. I have a fixed size container around 900px by 600px. Inside this container, there are multiple smaller divs, which are arranged in absolute. Everything looks good.

But I have one problem, I’m trying to get it so that the main container (900x600) will align itself in the middle and center of the user’s screen regardless of what resolution it is. So far, I’ve got it to center just fine, but it will not align vertically. I tried using vertical-align: middle, but it does not work. Are there any suggestions?

CSS Example

#ap_w0 {
    position: relative;
    width:100%;
    height:100%;
    float: inherit;
    z-index:1;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;
    overflow: visible;
}

#ap_w1 {
    position: absolute;
    width:926px;
    height:680px;
    z-index:2;
    background-image: url(../img/bg_w1.png);
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;
    overflow: visible;
}

Example:


<div id="ap_w0">
  <div id="ap_w1">
  </div>
</div>

Thanks in advance :slight_smile:

2

only write the align tag in out div.

<div id=“ap_w0” align=“center”>>
<div id=“ap_w1”>
<div id=“ap_w2”>
</div>

3

Sorry, that does not work, it only causes all the text in the container to center. What I’d like is just the container to be centered and middle aligned. (vertical + horizontal, not just horizontal). Thanks!

4

The usual solution I suggest is Dead Centre, but as far as I can tell, that won’t work for you because of variable content. Am I right about that?

5

Cool, that worked! Thank you so much :slight_smile:

6

Oh, cool. :slight_smile: