我有具体情况。我想用 position:absolute 垂直对齐一个元素(在本例中为按钮)，并且在可调整大小的 div 中也采用绝对定位(试图获得流式布局)。
HTML:
<div id="container">
<div id="first-block-call" class="call-to-action">
<input name="continue" type="button" class="buttonb" value="CONTINUEZ">
</div>
</div>
CSS:
#container {
width:100%;
height:100px;
position:relative;
}
.call-to-action {
width:102.85%;
max-height:120px;
background-image:url('http://bybyweb.com/snail-secret/fluid/images/cures2-responsive.png');
background-repeat:no-repeat;
background-size:100%;
position:absolute;
left:-1.4%;
bottom:-42px;
}
.call-to-action input.buttonb {
max-width:267px;
max-height:120px;
width:202px;
height:47px;
min-width:202px;
min-height:47px;
right:2%;
top:29%;
position:absolute;
background-image:url('http://bybyweb.com/snail-secret/fluid/images/green-button.png');
background-repeat:no-repeat;
border:none;
background-color:transparent;
color:#e3e3e3;
cursor:pointer;
font-family:Arial, Helvetica, sans-serif;
font-size:26px;
font-weight:bold;
line-height:42px;
text-shadow: 0px 2px 2px rgba(150, 150, 145, 1);
display:block;
background-size:100%;
background-position:center;
margin:0;
}
目前，css 是一团糟，我也试图获得可调整大小的按钮，但没有成功，但现在我想垂直对齐它，至少...
fiddle :http://jsfiddle.net/c0jj5xya/
要获得更清晰(更大)的图片，您可以访问:http://bybyweb.com/snail-secret/fluid/ ，并将屏幕大小从 768px 调整为 989px，然后您可以获得整个上下文(也许我将不得不制作额外的/新的 html)...
附言您会注意到在这种情况下，完美的 50% 对齐是不够的，背景图像/布局是特定的……因此，还需要一些额外的数学运算，这意味着-欢迎使用 javascript/jquery 解决方案!但我注意到我无法通过设置最大高度值获得准确的 div 高度...:(
最佳答案
将.call-to-action的高度设置为47px，然后添加
position: absolute;
top: 50%;
transform: translateY(-50%);
到 .call-to-action input.buttonb 垂直对齐按钮。
参见 here
关于html - 在流体容器内居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26641166/