Css flex垂直对齐

大家好，这是一个简单的用css flex制作的tic-tac-toe游戏板。我想用flex在框的垂直中心粘贴“X”。这是链接 codepen.io/anon/pen/bMOmRq

将此css添加到.box

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

---

垂直中心使用此代码：

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