元素水平居中，保持在父div的边界内，在页面的底部?

Question

我想让我的文本水平居中在页面的主要部分，而表现得像侧边栏不存在。另外，我还希望它位于页面的最底部。

#chat-form {
display: flex;
justify-content: center;
}

<section id="bottom-notice" style="position: absolute; bottom: 0px; width: 100%; background-color: red;">
<form id="chat-form">
<p style="color: #9a9a9e; font-size: 12px;">This text is the bane of my existence</p>
</form>
</section>

我的想法是有一个父div，将它放在绝对位置的底部，然后

让子元素像这样水平居中，让justify-content居中，同时尊重其他div。然而，它的行为很奇怪，太右了。我可以得到的文本是尊重侧边栏居中，并在底部，但从来没有在同一时间。我尝试了很多方法，但没有一种能让我成功。

Answer 1

我想这会解决你的问题。从下面的代码中，您的侧边栏将固定在左侧，而您的文本将保留在页面底部，而不考虑侧边栏的位置。出于演示目的，我分别写下了HTML和CSS。

.container{
min-width:100%;
min-height:100%;
}
.sidebar{
position: fixed;
top:0;
left:0;
background-color: #000000;
color:#ffffff;
width:25%;
height:100%;
}
.text{
position: absolute;
bottom:0;
text-align:center;
width:100%;
}

<div class="container">
<div class="sidebar">My Sidebar</div>
<div class="text">
<p>This text is the bane of my existence</p>
</div>
</div>