Css flex vertical align

Question

Hi all this is a simple tic tac toe game board made with css flex .I want to paste "X" in the vertical center of box when its hovered with using flex.This is the link codepen.io/anon/pen/bMOmRq

Answer 1

Add this css to .box

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

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

Answer 2

Use this code for vertical center:

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