如何将<input>放在<div>的中心

Question

我的HTML看起来像这样:

<div class="item">
    <div class="check">
      <input type="checkbox">
    </div>
    <div class="descr"> ... </div>
    <div class="details"> ... </div>
</div>

如何在div.check水平和垂直方向的中间对齐复选框？(".item"div 的高度是动态的)

Answer 1

这是一个不需要CSS3支持的Kilian Stinson代码编辑.而不是translate我使用em's:

HTML:

<div class="check">
      <input class="center" type="checkbox">
</div>

CSS:

.check {
    width: 40px;
    height: 80px;
    outline: 1px solid red;
    position: relative;
}

.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -.5em;
    margin-top: -.5em;
}

JSFiddle:http://jsfiddle.net/Yzhnf/4/