Question

我的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>

忽略<div id="header">以外的所有元素我想在<div class="container">内对齐<div id="header">正好在底部中心。我正在使用以下CSS代码 -

#header{ width:1062px; height:326px; background-color:#110000; text-align:center; position:relative; }
#header .container{ width:940px; height:262px; background-color:#220000; margin:0px auto; position:absolute; bottom:0px; }

父（#header）和子（#header .container）DIV之间存在高度差异。从孩子中移除position:absolute;使其居中，但它会粘在父母的顶部而不是底部。保持position:absolute;将其粘在底部，但将其与左侧对齐。

如何同时将中心和底部对齐？

Answer 1

I tried all the solution above but it didn't work when you resize the browser window. This solution is mostly to be applied when you don't know the element's width. Or if the width is changed on resize.

After making some research I tried the following and it worked perfectly on all screen sizes.

long

I shared this for anyone still facing this issue.

Answer 2

尝试这样：

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

Answer 3

试试这个

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

Answer 4

使用它：

#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;
}

这里是jsfiddle

<强>更新
正如DenisVuyka在评论中所说的那样，我应该补充一点，上面的示例是对DIV固定高度这个特定问题的回答。
如果您希望DIV的高度不分解，那么您应该使用padding-top:10%;中的#header和height:100% CSS中的#header .container。

#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;
}

以下是演示：http://jsfiddle.net/d6ct6/。

Answer 5

我也试图在我的项目中使用它。我编辑了这个jsfiddle： http://jsfiddle.net/d6ct6/

<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);
}

但是我发现这只有在.container的宽度固定时才有效。

如果.container的宽度未修复，则需要javascript才能找到它的宽度，然后在calc中更改该宽度。

当宽度响应时，请使用： HTML

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

CSS

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

JS

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

Answer 6

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

DEMO我使用的高度是第一个div高度 - 第二个div高度。

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

Answer 7

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

#header {
    width:1062px;
    height:326px;
    background-color:#110000;
    text-align:center;
    display: table-cell;
    vertical-align: bottom;
}
#header .container {
    width:900px;
    height:262px;
    background-color:#cccccc;
    color: white;
    display: inline-block;
  }

将#header块设置为display: table-cell并设置vertical-align: bottom以将子项的下边缘与父项的下边缘对齐。

子.container元素已display: inline-block，这将允许它回复父级的text-align: center属性。

无论孩子.container的宽度如何，这都会有效。

演示小提琴：http://jsfiddle.net/audetwebdesign/p9CxE/

Answer 8

同样的问题困扰了我一个小时左右，直到我意识到我可以添加一个中间div;这将垂直对齐问题与居中区分开来。

＆＃13;

.dparent {
    border: 1px solid red;
    width: 300px;
    height: 300px;
    position: absolute;
}
.dchild {
    border: 1px solid blue;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 100px;
    bottom: 0px;
    position: relative;
}

.dmid {
    border: 1px solid green;
    width: 100%;
    position: absolute;
    bottom: 0;

＆＃13;

    <div class="dparent">
        <div class="dmid">
            <div class="dchild"></div>
        </div>
    </div>

＆＃13;

首先进行垂直对齐，绝对位置和0底部。然后将margin-left和margin-right的居中设置为auto。

Answer 9

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

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

祝你好运！

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

9 个答案: