Stack Question

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Center</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
<body>
  <div class="box">
    <h1>Centered Text</h1>
  </div>

</body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
}
body{
  background-color: teal;
  font-family: sans-serif;
}
.box{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  width: 500px;
  height: 100px;
  background-color: red;
}
h1{
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  font-size: 50px;
  font-weight: lighter;
  color: white;
}