CSS垂直中间输入复选框

Question

我喜欢在div中垂直居中。我已尝试将vertical-aligin: middle设为display: inline-block。复选框iteself为100%时，这只是锻炼。但是可以选择完整的100%。还尝试将复选框包含到vertical-aligin: middle和display: inline-block的另一个div中，但没有成功。

<div style='height:100%;'>
    <input type='checkbox' style='display: inline-block; vertical-aligin: middle'/>
</div>

现在我的解决方案是：

  input[type="checkbox"] {
    top:  calc(50% - 6.5px);
    position: relative;
  }

Answer 1

你可以做这样的事情

<div style='height:300px; background: blue;'>
    <input type='checkbox' style='display: inline-block; position: relative; top: 48%;'/>
</div>

请参阅此处http://jsfiddle.net/j9c9V/