Css 将DIV保持在其父DIV的底部中心

我的HTML结构基本上是这样的-

<div id="header">
    <div class="container">
    </div>
</div>
<div id="content">
    <div class="container">
    </div>
</div>
<div id="footer">
    <div class="container">
    </div>
</div>

父（#header）和子（#header.container）div之间存在高度差异。移除

位置：绝对位置从子对象将其居中，但它会附着到父对象的顶部而不是底部。保持
位置：绝对将其粘贴在底部，但将其与左侧对齐

如何同时对齐中心和底部

#header .container{ 
   width: 940px;  
   height: 262px; 
   background-color: #220000; 
   position: absolute;
   bottom: 0 ;
   left: 50%;
   margin-left: -470px; 
}

试试这个

#header .container {
    width: 940px;
    height: 262px;
    background-color: #220000;
    margin: 0px auto;
    position: absolute;
    bottom: 0px;
    left: 61px;
}

如果您更关心内部div在中心对齐，可以手动设置垂直对齐

我使用的高度是第一节高度-第二节高度

#header .container{ width:940px; height:262px; background-color:red; margin:0 auto; position:relative; top: 64px; }

我将利用CSS表显示属性并执行以下操作：

#标题{
宽度：1062px；
高度：326px；
背景色：#110000；
文本对齐：居中；
显示：表格单元格；
垂直对齐：底部对齐；
}
#标题.容器{
宽度：900px；
高度：262px；
背景色：#中交；
颜色：白色；
显示：内联块；
}

将
#标题
块设置为
显示：表格单元格
，并将
垂直对齐：底部
设置为将子项的底部边缘与父项的底部边缘对齐

子
.container
元素具有
display:inline block
，这将允许它响应父元素的
text align:center
属性

无论子容器
.container
的宽度如何，这都将起作用

演示小提琴：
使用此：

#header{ 
width:1062px; height:262px; background-color:#110000; text-align:center;  
position:relative;text-align: center; vertical-align: bottom;padding-top:64px;
}  

#header .container{ 
    width:940px; 
    height:262px; 
    background-color:#999000; 
    margin:0px auto;
    bottom:0px; 
    margin-bottom: 0px;
    padding-top: 0px;
}

这是

更新：

正如DenisVuyka在评论中所说的，我应该补充一点，上面的样本是针对这个问题的答案，DIV的高度是固定的。

如果你想让DIV的高度不破坏东西，比如你应该使用
padding top:10%#标题中的code>和
高度：100%
在
#标题.容器中

#header{ 
width:462px; height:262px; background-color:#110000; text-align:center;  
position:relative;text-align: center; vertical-align: bottom;padding-top:10%;  
}    

#header .container{ 
    width:300px; 
    height:100%; 
    background-color:#999000; 
    margin:0px auto;
    bottom:0px; 
    margin-bottom: 0px;
    padding-top: 0px;
}

这里有一个演示：
 同样的问题困扰了我大约一个小时，直到我意识到我可以添加一个中间div；这将垂直对齐问题与定心分离


.dparent{
边框：1px纯红；
宽度：300px；
高度：300px；
位置：绝对位置；
}
D.孩子{
边框：1px纯蓝色；
左边距：自动；
右边距：自动；
宽度：200px；
高度：100px；
底部：0px；
位置：相对位置；
}
德米特先生{
边框：1px纯绿色；
宽度：100%；
位置：绝对位置；
底部：0；

您可以针对任何相关宽度尝试此解决方案：

width:100%;
position:absolute;
bottom: 5px; 
left:50%;
margin-left:-50%;

祝你好运！
我也在努力让它在我的项目中发挥作用。我编辑了这个JSFIDLE：

JS

我尝试了上面所有的解决方案，但是当你调整浏览器窗口的大小时，它不起作用。这个解决方案主要是在你不知道元素的宽度时应用的。或者如果宽度在调整大小时改变

在做了一些研究之后，我尝试了下面的方法，它在所有屏幕尺寸上都非常有效

#somelement {
  position: absolute;
  left: 50%;
  bottom: 0px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

我向仍然面临此问题的任何人分享了此信息。
这是可行的。但显然，如果我更改.container的宽度，它就不再是中心。不是说我需要立即更改它，而是有什么解决动态宽度情况的方法吗？如果元素处于绝对位置，则无法控制边距为0的对齐方式：自动；这就是为什么您需要更改它ed使用这项技术这项技术也很有效，但与Fabrizio的回答没有什么不同：如果父/子的尺寸发生变化，则.container不再位于中心。无论如何，谢谢。示例无法按预期工作。请尝试将#header height增加100 px，然后。container将位于中间。它似乎仅在视觉上固定在顶部（通过“填充顶部：64px”设置）@DenisVuyka感谢您的评论。是的，但不是！该示例是对DIV的固定高度的特定问题的回答。如果您希望DIV的高度不会破坏东西，那么您应该在
#header
中使用百分比填充顶部
，在
#header.container
中使用
高度：100%
演示：。这需要进一步升级！在我的设置中效果非常好！这是一个好方法。唯一的挫折是#someelement的宽度将限制为父元素宽度的50%。@clayRay不，这不会影响元素的宽度。它只会影响其父元素内的位置。宽度将保持定义不变。
<div id="header">
  <div class="container">
  </div>
</div>

#header { 
height:100vh; 
background-color:#110000; 
position:relative; 
}
#header .container{ 
width:300px; 
height:40px; 
background-color:#999000; 
bottom:0px; 
position:absolute;
left:calc((100% - 300px)/2);
}

<div id="header">
<div id="container">
</div>
</div>

#header { 
height:100vh; 
background-color:#110000; 
position:relative; 
}
#container{ 
width:300px; 
height:40px; 
background-color:#999000; 
bottom:0px; 
position:absolute;
}

$(document).ready(function () {
var parentWidth = $('#header').width();
var trapWidth = $('#container').width();
var deadCenter = (parentWidth - trapWidth);
var deadHalf = Number( deadCenter / 2 );
$('#container').css("right", deadHalf);
});

#somelement {
  position: absolute;
  left: 50%;
  bottom: 0px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}