Css flex垂直对齐

Question

大家好，这是一个用css flex制作的简单的tic tac toe游戏板。我想粘贴＆＃34; X＆＃34;当它在使用flex时盘旋时，在盒子的垂直中心。这是链接 codepen.io/anon/pen/bMOmRq

Answer 1

将此css添加到.box

  display: flex;
  align-items: center;
  justify-content: center;

https://codepen.io/anon/pen/RyEeYa

Answer 2

将此代码用于垂直中心：

.box:hover::before{
    content: "X";
  display:flex;
  align-items:center;
  height:100%;
  justify-content: center;
}