asked on

Center <DIV> with absolute

I have two separate parties, one is a PHP contact form that in case of error or no input, it shows an error on send on the next page. But the PHP page includes a header. I can center the header which is 900px height and this way the error code appears at the end while I would like to appear it in the middle of the page. How to go?

Thanks for any tip.

Tom Beck

Elements can be positioned absolute and still be centered in a parent container as long as the parent has a position set to something other than position:static. Consider the sample below.

<body style="margin:0 auto;padding:0">
<div id="parentDiv" style="height:900px;width:700px;background-color:#def;margin:auto;position:relative;">
    <div id="firstChildDiv" style="height:400px;width:300px;background-color:#fed;position:absolute;left:200px;top:50px">
        <div id="childChildDiv" style="height:200px;width:200px;background-color:#edf;position:absolute;left:50px;top:50px;"></div>
    
    </div>
</div>
</body>

Open in new window

Nicola Siotto

ASKER

No sorry, this is not what I need. I know how to center <DIV>. The issue is that this header is part of a PHP header inclusion and therefore the variable text then is pushed at the end of the page while I need it in the middle, although it will be only after all DIV's.

I believe I found a solution by utilizing DIV also in the PHP variables, but was seeking if there were some more simplier solutions.

ASKER CERTIFIED SOLUTION

softpro2k

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Center &lt;DIV&gt; with absolute

Center <DIV> with absolute