Div 水平垂直置中(Chrome)

<div id="btn-view">
<div id="btn-base">
<div id="btn-txt">Button</div>
</div>			
</div>

要求：按钮btn-base在btn-view块中水平置中，按钮label在btn-base块中水平以及垂直置中，其中btn-base块的大小是动态的。

Css btn-view：

#btn-view {
position: relative; width: 700px; 
top:100px; height:300px;
text-align: center;
margin: auto;
}

在父块btn-view中必须设置text-align以及margin。width的值必须比其子块btn-base的width大，否则会出现置中异常。position如果设为absolute会在水平方向上有偏移量，不会完全置中，须用left来调整。

Css btn-base：

#btn-base{
position: relative; width: 140px; 
top: 50px; height:50px;
margin:auto;
display: table;
}

块的水平置中必须在子类中设置margin项为auto。display为table是用于其子块中的文字在其区域垂直置中，即按钮的label不管按钮多少大小都会垂直置中(label的水平置中是默认的)。

Css btn-text：

#btn-txt{
position:relative;
display: table-cell;
vertical-align: middle;
}

vertical-align为middle必须和display为table-cell同时使用才会有垂直置中效果。