如何正确对齐在特定位置调整大小的内容

Question

好吧我正在网页上工作，当你试图填写登录表单或注册表单时，如果出现任何问题，它会弹出一条消息......或者说正确。我希望它在行星图像的中心。这是一个Div。另外要注意的是，行星图像下方有文本作为其中的一部分，因此使用图像作为中心参考是不可能的。我只是想知道如何设置中间点始终是相同的，所以当出现多个错误/消息时，它不会偏离中心，并且随着每个添加的消息的增长，它看起来会很好。我不是出于个人原因透露网站名称。

图片：

（抱歉马铃薯质量）

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

使用Javascript或Jquery获取#banner元素（http://api.jquery.com/height/）的高度，然后使用结果更改元素的顶部位置。

这假设您的#banner消息不会超过某个值，因为它可能会最终呈现在页面顶部。

Answer 2

听起来您希望错误在其容器中覆盖500px。使用1000px高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