如何实现文本在行内方形元素中垂直水平居中？

子元素仅为<p>X</p>，尝试使用justify-content-center、align-items-center、text-center类均未生效，希望文本能在方形元素中同时实现垂直和水平居中。

现有代码 #

HTML（React） #

<div className="d-flex flex-row justify-content-center boardRow">
   {[...Array(3).keys()].map((col, index_col) => (
      <div 
         className="d-flex flex-column d-flex justify-content-center align-items-center element innerBoard bg-danger">
         {children[row * 3 + col]} 
      </div>
   ))}
</div>

CSS #

.boardBox {
  .element {
    border: 1px solid black;
  }

  .boardRow:first-child .element {
    border-top: none;
  }
  .boardRow:last-child .element {
    border-bottom: none;
  }
  .boardRow .element:first-child {
    border-left: none;
  }
  .boardRow .element:last-child {
    border-right: none;
  }
}

.innerBoard {
  width: 20px;
  height: 20px;
}

效果说明 #

文本"X"仅在方形元素顶部水平居中，未实现垂直居中。

问题原因 #

1. <p>标签自带浏览器默认的上下margin，而方形元素尺寸仅20px×20px，margin会挤占内部垂直空间，导致垂直居中失效；
2. 父元素className中重复写了d-flex，属于冗余代码；另外flex-column设置为垂直排列，对于单行文本居中来说没必要。

解决方法 #

方案1：清除<p>的默认margin #

给内部的<p>标签去掉默认margin，有两种方式：

• 用Bootstrap内置类：直接给<p>添加m-0类，示例：

  {/* 确保子元素是带m-0类的p标签 */}
  <p className="m-0">X</p>
  

• 自定义CSS：在现有CSS中添加：

  .innerBoard p {
    margin: 0;
  }
  

方案2：优化父元素Flex配置 #

简化父元素的className（去掉重复的d-flex和不必要的flex-column），确保Flex布局正确：

<div 
  className="d-flex justify-content-center align-items-center element innerBoard bg-danger">
  {children[row * 3 + col]} 
</div>

验证效果 #

调整后，<p>标签不再占用额外垂直空间，Flex布局的justify-content-center（水平居中）和align-items-center（垂直居中）会正常生效，文本"X"将完全居中在20px×20px的方形元素内。

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