css - 特定の場所でサイズ変更されるものを適切に配置する方法

Question

申し分なく私はウェブページに取り組んでおり、ログインフォームまたは登録フォームに入力しようとすると、何か問題が発生した場合にメッセージがポップアップ表示されます...またはそうです。そして、惑星の画像の中心に置きたいと思います。ディビジョンです。また、惑星の画像にはその下にテキストが含まれているため、画像を中心の参照に使用することは問題外です. 中間点を常に同じに設定する方法を知りたいだけなので、複数のエラー/メッセージが発生したときに中心から外れることはなく、メッセージが追加されるたびに大きくなるにつれて見栄えが良くなります。個人的な理由でサイト名は公開しません。

画像：

（じゃがいものクオリティでごめんなさい）

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 と 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;
}
?>

関数 output_errors は、配列を文字列に変換してエコーします。