垂直居中文字的单个字符？

Question

我正试图将一个角色居中，如下：

<div class='button'>x</div>
<div class='button'>+</div>
<div class='button'>*</div>

.button {
  border: solid 2px #aaa;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  color: #888;
  width: 16px;
  height: 16px;
  font-weight: bold;
  text-align:center;
  float: left;
  margin-right:5px;
  font:14px Helvetica Neue,Helvetica,Arial,sans-serif;
  line-height: 100%;
}

这会使每个div中的角色水平居中，但不会垂直居中 - 我们需要做什么才能使其垂直居中？

由于

Answer 1

因为它是一个字符：

line-height: 100%;

如果将line-height设置为100％不起作用，请将其设置为容器的固定高度：

.button {
    height:300px;
    width: 300px;
    text-align: center;
    line-height: 300px;
    border: 1px dotted #999;
}

点击此处：http://jsfiddle.net/7afUH/1/