center a box in the middle of the screen

HTML

<div class='love-like-wrap flex-center centered'>
      :)
    </div>

CSS

.love-like-wrap {
      text-align:center;
      height:400px;
      width:400px;
      border:2px solid #444;
      padding:20px;
    }
    .flex-center {
      display: flex;
    	align-items: center;
    	justify-content: center;
    	transition: all 1s;
    }
    .centered {
      position: fixed;
      top: 50%;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%, -50%);
    }