html - 在一个小的 div 中居中一个按钮

Question

我有一个高度未知的 div，但在这个例子中我使用的是 3px。我想将按钮居中，但它似乎总是被任意量抵消。一旦我知道高度，我就可以动态地做一个绝对定位技巧，但如果可能的话我更喜欢 css 解决方案。

<div style="width: 100%; height: 3px;">      
  <div class="special">                               
    <input type="button" />                     
  </div>
</div>

div{                
  height: 100%; 
  overflow: visible;
}

.special{   
  position:relative;
  text-align: center;   
  padding: 1px;
  border: 1px solid red;
}

input{  
  height: 100%; 
  width: 100px;
  min-height: 8px;
}

想法是，使用最小高度，按钮将均匀地溢出到 div 的顶部和底部。

jsfiddle

Answer 1

您可以通过执行以下操作使其正常工作:

CSS:

div {
    height: 100%;
    overflow: visible;
}
.special {
    text-align: center;
    border: 1px solid red;
    position:relative;
}
input {
    position:absolute;
    margin-top:-4px;
    margin-bottom:-4px;
    top:0px;
    bottom:0px;
    width:100px;
    min-height:7px;
}

注意 input特别声明。而不是 height:100%我用了position:absolute与 top:0px和 bottom:0px .这会将高度设置为 100%。它需要是绝对位置，这样你才能做 margin-top:-4px和 margin-bottom:-4px得到重叠。你可以看到它适用于外部 <div/> 的任何高度.

下面的 JSFiddle 添加了一些控件，因此您可以更改 .special <div/> 的高度。无需刷新。

http://jsfiddle.net/bmyAW/8/