ExtJS如何使panel 的内容居中显示

我的一个panel 下有3个按钮，我想让这3个按钮居中，如图我的按钮在左边，代码如下
var center = new Ext.Panel({
title:'一次照明',
region:'center',
width:'100%',
height:95,
items:[
{
xtype: 'buttongroup',
align : 'center',
//columns: 3,
items: [{
text: '开',
width : 60,
height: 60,
rowspan: 1,
iconCls: 'search-icon',handler : function() {}
},{
text: '关',
width : 60,
height: 60,
rowspan: 1,
iconCls: 'reset-icon',handler : function() {}
},{
text: '延时',
width : 60,
height: 60,
rowspan: 1,
iconCls: 'reset-icon',handler : function() {}
}]
}
]
});

---

试下将panel渲染到某个居中显示div里面。
panel加入这郑念带个配置项：renderTo:'div1'高核
HTML相关代码：

---

layout 使汪拿用困裤搭 hbox：

...
region:'纯镇center',
layout: {
type: 'hbox',
align: 'middle ',
pack: 'center'
},
height:95,
...

---

layout: {
align: 'middle',
pack: 'center',
type: 'hbox'

}

如图示，fieldset居中了，textfield也居中了