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 只是将数组转换为字符串并回显它。

Answer 1

听起来您希望错误在其容器中覆盖 500 像素。使用 1000 像素高的 div 和 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;
}

#cell 中的任何内容都应以包含 #table 的任何内容的 500px 为中心。 Example .