移动端UI开发CSS问题：无法同时实现容器与文本居中

嘿，我懂你现在的纠结——既要让按钮容器在滑动区域中间居中，又要让容器内的文本水平垂直居中，试了两种写法都顾此失彼对吧？咱们先拆解下你之前写法的问题，再给你个简单靠谱的解决方案。

为什么你的两种写法都失效？ #

1. 同一div加两个类的问题：
   你给按钮div同时加了call-button-container和tabCenter，但tabCenter里的display: table-cell会让margin: auto直接失效——table-cell元素的margin属性本身就不生效，所以容器没法居中，只有文本靠着text-align: center和vertical-align: middle实现了居中，这就出现了「文本居中但容器左对齐」的情况。

2. 嵌套div的问题：
   外层call-button-container用margin: auto实现了容器居中，但内层的tabCenter是display: table-cell，它需要父元素（外层按钮div）设置display: table类的布局属性才能正常发挥作用，再加上外层div没有给表格布局提供合适的上下文，文本自然就跑到左上角了。

推荐解决方案：用Flex布局（简单高效，移动端兼容性拉满） #

Flex布局是现在移动端布局的首选，能同时搞定容器居中+文本居中，代码还特别简洁：

修改后的CSS代码：

.call-button-container {
  margin: auto; /* 让容器在父元素中水平居中 */
  width: 233px;
  height: 80px;
  padding: 10px;
  background: #29A3D8;
  border-radius: 4px;
  font-family: lato-bold;
  font-size: 17px;
  color: white;
  /* 新增Flex属性实现内部文本水平垂直居中 */
  display: flex;
  justify-content: center; /* 水平居中文本 */
  align-items: center; /* 垂直居中文本 */
}

对应的HTML代码（单个div即可）：

<div class="call-button-container" @click="makeCall(true)">Video {{activeCall.to}}</div>
<div class="call-button-container" @click="startCall(false)">Call {{activeCall.to}}</div>

原理说明 #

• margin: auto 让按钮容器在它的父元素（滑动区域）中水平居中（只要父元素是块级且有明确宽度，这个属性就会生效）。
• display: flex 把按钮容器变成flex容器，内部的文本会作为flex项目，通过justify-content: center和align-items: center直接实现水平+垂直的双重居中，完美匹配你的需求。

要是你非得用table相关的布局方式，也可以给按钮套一个外层容器，设置display: table和width: 100%，然后按钮用display: table-cell，但Flex的写法显然更简洁易懂，也更符合现代前端的最佳实践。

内容的提问来源于stack exchange，提问作者Rasim Avcı