How to properly align something that resizes in a specific location

Question

Alright I am working on a webpage and when you attempt to fill in a login form or register form it has a message pop-up if anything goes wrong... Or right. And I would like it in the center of the planet image. It is a Div. Also to note the planet image has text as part of it underneath so using the image for a center reference is out of the question. I merely want to know how I can Set the middle point to always be the same so when more than one error/message occurs it won't be off center and it would look nice as it grows with every message added. I'm not disclosing the name of the site for personal reasons.

Image:

( Sorry for the potato quality )

CSS:

#banner{  
    width: 800px;  
    margin-left: -400px;  
    left:50%;  
    top: 100px;  
    margin-bottom: 20px;  
    font-size: 15px;  
    font-weight: bold;  
    color:rgb(255,255,255);  
    text-align: center;  
    line-height: 30px;  
    border-radius: 15px;  
    position: absolute;  
}

Html and Php:

<?php 
if (empty($_SESSION['errors']) === false) {
    echo '<div id="banner" style="background-color:rgb(120,0,0);">';
    output_errors($_SESSION['errors']);
    echo '</div>';
    $_SESSION['errors'] = NULL;
}

if (empty($_SESSION['message']) === false) {
    echo '<div id="banner" style="background-color:rgb(0,100,0);">';
    output_errors($_SESSION['message']);
    echo '</div>';
    $_SESSION['message'] = NULL;
}
?>

The function output_errors just turns an array to a string and echos it.

Answer 1

Sounds like you want errors to be overlaid 500px in their container. Using a 1000px high div and display: table-cell:

HTML

<div id="table">
    <div id="cell">
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
    </div>
</div>

CSS

#table {
    width: 100%;
    display: table;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 1000px;
}
#cell {
    display: table-cell;
    vertical-align: middle;
}

And anything inside #cell should be centered at 500px of whatever contains #table. Example.