Html 如何对齐表单元格父div中子div内的文本

我有一个父div，它有

display:table属性。里面有一个子div，带有
display:table cell属性

问题是，第二个div中的div有一个文本，即使在属性
text align:center未将文本与中心对齐

HTML:

<div class="hometab" id="groupList">
    <div ng-repeat="group in groupsData">
      <div class="groupButton"
            ng-style="{'background-color':'#'+group.color}">
            {{group.name}}
      </div>
    </div>
  </div>


{{group.name}

CSS:

.hometab{
  z-index:10;
  position:fixed;
  width: 100%;
  top:100%;
  transform: translateY(-100%);
  height:10vh;
  overflow: auto;
  white-space: nowrap;
  display: table;
  border-collapse: collapse;
  table-layout: fixed;
  border-spacing: 10px;
  border-collapse: separate;

  background-color: #ebebeb;
  -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s; /* Firefox < 16 */
  -ms-animation: fadein 1s; /* Internet Explorer */
  -o-animation: fadein 1s; /* Opera < 12.1 */
  animation: fadein 1s;
}

.hometab > div {
  display: table-cell;
}

.groupButton{
    text-align: center;
  vertical-align: middle;
    color: white;
  font-family: "Roboto";
    font-size: 20px;
    height: 100%;
  font-style: regular;
  border: 3px ;
  border-radius: 15px;
  -o-border-radius: 15px;
  -moz-border-radius: 15px;
  -icab-border-radius: 25px;
  -khtml-border-radius: 25px;
  -webkit-border-radius: 15px;
}

.hometab{
z指数：10；
位置：固定；
宽度：100%；
最高：100%；
转换：translateY（-100%）；
高度：10vh；
溢出：自动；
空白：nowrap；
显示：表格；
边界塌陷：塌陷；
表布局：固定；
边界间距：10px；
边界塌陷：分离；
背景色：#ebebebeb；
-webkit动画：fadein 1s；/*Safari、Chrome和Opera>12.1*/
-moz动画：fadein 1s；/*Firefox<16*/
-ms动画：fadein 1s；/*Internet Explorer*/
-o-动画：fadein 1s；/*Opera<12.1*/
动画：Fadein1s；
}
.hometab>div{
显示：表格单元格；
}
.groupButton{
文本对齐：居中；
垂直对齐：中间对齐；
颜色：白色；
字体系列：“机器人”；
字体大小：20px；
身高：100%；
字体风格：常规；
边界：3px；
边界半径：15px；
-o-边界半径：15px；
-moz边界半径：15px；
-icab边界半径：25px；
-khtml边界半径：25px；
-webkit边界半径：15px；
}

截图：

扩展HTML：

基本上我的
垂直对齐：中间
不工作。如果我删除了height属性，它就会开始工作。
一定有什么东西在干扰你的风格。查看浏览器的检查器。你的代码能正常工作吗


*{
填充：0；
保证金：0；
}
.hometab{
z指数：10；
位置：固定；
宽度：100%；
最高：100%；
转换：translateY（-100%）；
高度：10vh；
溢出：自动；
空白：nowrap；
显示：表格；
边界塌陷：塌陷；
表布局：固定；
边界间距：10px；
边界塌陷：分离；
背景色：rgba（0,0,0,1）；
-网络工具包动画：Fadein1s；
/*Safari、Chrome和Opera>12.1*/
-moz动画：Fadein1s；
/*Firefox<16*/
-ms动画：fadein 1s；
/*Internet Explorer*/
-o-动画：fadein1s；
/*歌剧<12.1*/
动画：Fadein1s；
}
.hometab>div{
显示：表格单元格；
背景色：rgba（0,0,0,1）；
文本对齐：居中；
}
.groupButton{
文本对齐：居中；
垂直对齐：中间对齐；
颜色：黑色；
字体系列：“机器人”；
字体大小：20px；
身高：100%；
字体风格：常规；
边界：3px；
边界半径：15px；
-o-边界半径：15px；
-moz边界半径：15px；
-icab边界半径：25px；
-khtml边界半径：25px；
-webkit边界半径：15px；
背景色：rgba（0,0,0,1）；
显示：内联块；
填充：0.1em；
}

乱数假文
乱数假文
乱数假文
当我开始使用ng repeat时，问题就开始了。@arqam在开始使用框架时，勇敢地克服了它们带来的困难。给我一个链接到project@arqam我改变了我的答案。为按钮添加了
显示：内联块
，以及
文本对齐：居中无效。按钮包裹了文本，但没有覆盖父div的全部宽度。我将添加我在答案中获得的图像。首先，使用
填充：0 1em
。其次，按钮和不应拉伸，例如，当您在表格单元格中放置短文本时，它不会拉伸到其整个宽度。我认为您应该使用flex而不是table Cell，您可以显示呈现的html吗please@Pete添加了图像。对不起，呈现的源html-即当您的页面加载后，查看源代码并获取html，但是查看您的屏幕截图，按钮中的文本是否与中心对齐？你在期待什么