如何调整框的大小，但仍然将文本放在中心？

Question

在以下HTML中：

<div class='title'><h2>Title</h2></div>

我想调整框的大小，所以写了以下内容：

.title {
display: block;
border-radius: 12px;
border: 1px solid;
}

然而，结果框看起来有点大，因此我试图调整它的大小。

.title {
height: 90%;
}

但是，即使我尝试编写上述代码，结果框也不会受到设置的影响。

.title {
height: 100px;
}

这很有用。然而，它里面的文字不再是中心，所以我试着把它放在中心位置。

.title h2 {
vertical-align: middle;
}

然而，这不起作用。

那么我怎样才能调整盒子的大小但是文本里面的文本仍然完好无损？

另外，为什么第一个高度设置不起作用，但第二个设置不起作用？

感谢。

Answer 1

尝试申请：（working jsFiddle）

.title h2 {
    margin:0px;
    line-height:100px; /* change to fit your needs */
}

在这种情况下，

vertical-align不是最好的方法..

<强>更新

使用this jsFiddle代替，它会根据需要使用vertical-align，而您无需应用line-height的{​​{1}} ...秘密正在制作父{ {1}}和孩子h2：

display:table;

Answer 2

检查jsfiddle。您可以设置line-height属性来实现此目的。

h2{line-height: 50px;}