如何在网页方形产品盒中实现文字垂直水平居中？table-cell方法无效

嘿，我来帮你搞定这个盒子文字居中的问题！你说用display:table-cell; vertical-align:middle;没效果，大概率是因为没给父元素搭配对应的display:table属性，或者盒子本身的布局结构有冲突——先别急，给你几个靠谱的解决方案，总有一个适合你：

1. Flex布局（最推荐，现代浏览器友好） #

这是当前做居中最省心的方案，只要给你的方形盒子（父容器）加这几个属性就行：

.product-box {
  display: flex;
  justify-content: center; /* 实现水平居中 */
  align-items: center;     /* 实现垂直居中 */
  width: 200px; /* 记得给盒子设置明确宽高，比如你需要的方形尺寸 */
  height: 200px;
}

不管盒子里的文字是一行还是多行，都能完美居中，不用额外嵌套结构，非常省心。

2. Grid布局（更简洁的现代方案） #

如果你的项目不用兼容太老的浏览器，用Grid会更简洁，一行代码搞定双方向居中：

.product-box {
  display: grid;
  place-items: center; /* 同时实现水平+垂直居中 */
  width: 200px;
  height: 200px;
}

这个写法比Flex更精简，效果完全一样。

3. 修复你的table-cell方案 #

如果你一定要坚持用table-cell的思路，得保证父元素和子元素的布局搭配正确，还要避免浮动、绝对定位这类会破坏table布局的样式：

.box-wrapper { /* 父容器 */
  display: table;
  width: 200px;
  height: 200px;
}
.box-content { /* 放文字的子盒子 */
  display: table-cell;
  vertical-align: middle;
  text-align: center; /* 补充水平居中 */
}

之前没效果很大概率是少了父元素的display:table设置，或者盒子本身加了float之类的冲突样式。

4. Position + Transform（兼容旧浏览器方案） #

如果需要兼容IE9及以上的旧浏览器，可以用这个经典方案：

.product-box {
  position: relative;
  width: 200px;
  height: 200px;
}
.box-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 拉回自身的一半实现居中 */
}

最后提醒下：一定要给盒子设置明确的宽高，如果盒子是自适应内容的，垂直居中就没有意义了；另外检查下有没有其他样式（比如padding、line-height）和居中属性冲突，先临时注释掉冲突样式试试。

内容的提问来源于stack exchange，提问作者Always Butterfly