我怎样才能使嵌套的div居中

Question

我试图垂直居中嵌套div来创建一个简单的数学问题（有分数），我不知道怎么做（没有根据父div高度对其进行硬编码）

我到目前为止看起来像这样：

我正试图将加号（div .plus）

居中

HTML

<div class = "problem">
    <div class = "fraction">
        5
        <hr />
        6
    </div>
    <div class= plus>
        +
    </div>
    <div class = "fraction">
        5
        <hr />
        6
    </div>
</div>

CSS

.fraction{
    width: 15px;
    text-align: center;
}

.problem > *{
    float: left;
    margin: 10px;
}

fiddle

Answer 1

您可以使用inline-block代替float：

.problem > *{
  display:inline-block;
  margin: 10px;
  vertical-align:middle;
}

演示http://jsfiddle.net/NT6d5/2/

Answer 2

另一种方法是使用display:table属性。

.problem{
     display:table;
}

.problem > *{
    padding:5px;
    display:table-cell;
    vertical-align:middle;
}

JSfiddle：http://jsfiddle.net/U3hfL/1/