Center a "X" in a div

by Simon Hi

HTML

<h1>Center a "X" in a div</h1>
<div>X</div>

CSS

* {
  box-sizing: border-box;
}

body {
  color: black;
  background: white;
}

div {
  font-size: 2em;
  position: relative;
  border: 1px solid black;
  width: 2em;
  height: 2em;
  color: transparent;
}

div:before,
div:after {
  content: "X";
  display: block;
  z-index: 1;
  position: absolute;
  top: 0.25em;
  bottom: 0.25em;
  left: 0.9em;
  right: 0.9em;
  background-color: black;
}

div:before {
  transform: rotate(45deg);
}

div:after {
  transform: rotate(-45deg);
}