text-align center is not centering text on h1 and h2

As the title says, I am trying to center h1 and h2. But whenever I type text-align: center; it just pushes them both to the left. I would like to have both h1 and h2 in the direct center of the screen. I could do it manually but I want it to be perfectly center. Thanks :)

h1 {
  position: absolute;
  font-family: 'Passion One';
  font-size: 50px;
  color: #42E616;
  letter-spacing: 1.6rem;
  top: calc(80% - 200px);
  text-align: center;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.6);
  opacity: .68;
  z-index: 2001;
}

h2 {
  position: absolute;
  font-family: 'Open Sans', monospace;
  font-size: 12px;
  color: black;
  letter-spacing: .4rem ;
  top: calc(58% - 30px);
  text-align: center;
  opacity: .68 ;
  z-index: 2002;
}

<!DOCTYPE html>
<html>

<head>

  <link href = "https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

  <link rel = "stylesheet" href="Style.css">

  <meta name = "viewport" content = "width = device-width, initial-scale=1">

  <title> AL-SABA.net </title>

</head>

<header>
  <h1> Title </h1>

  <h2> Personal Website </h2>
</header>
  
  
</html>

Solution

It's because of position: absolute;. That removes an element from the normal flow of the DOM and makes the element only as big as it needs to fit the content inside of it. So instead of taking up the entire width of the screen, as block elements like h1 and h2 normally would, they only take up as much space as needed to contain the text inside.

You can make the elements width: 100%; or left: 0; right: 0; to make them take up the entire width of the page, then text-align: center; will work as expected.

h1 {
  position: absolute;
  font-family: 'Passion One';
  font-size: 50px;
  color: #42E616;
  letter-spacing: 1.6rem;
  top: calc(80% - 200px);
  text-align: center;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.6);
  opacity: .68;
  z-index: 2001;
}

h2 {
  position: absolute;
  font-family: 'Open Sans', monospace;
  font-size: 12px;
  color: black;
  letter-spacing: .4rem ;
  top: calc(58% - 30px);
  text-align: center;
  opacity: .68 ;
  z-index: 2002;
}

h1,h2 {
  left: 0;
  right: 0;
}

<!DOCTYPE html>
<html>

<head>

  <link href = "https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

  <link rel = "stylesheet" href="Style.css">

  <meta name = "viewport" content = "width = device-width, initial-scale=1">

  <title> AL-SABA.net </title>

</head>

<header>
  <h1> Title </h1>

  <h2> Personal Website </h2>
</header>
  
  
</html>

Or you can position them 50% from left, then transform: translateX(-50%); to push the element back to the left half of it's own width to put it in the center of the page.

h1 {
  position: absolute;
  font-family: 'Passion One';
  font-size: 50px;
  color: #42E616;
  letter-spacing: 1.6rem;
  top: calc(80% - 200px);
  text-align: center;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.6);
  opacity: .68;
  z-index: 2001;
}

h2 {
  position: absolute;
  font-family: 'Open Sans', monospace;
  font-size: 12px;
  color: black;
  letter-spacing: .4rem ;
  top: calc(58% - 30px);
  text-align: center;
  opacity: .68 ;
  z-index: 2002;
}

h1,h2 {
  left: 50%;
  transform: translateX(-50%);
}

<!DOCTYPE html>
<html>

<head>

  <link href = "https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

  <link rel = "stylesheet" href="Style.css">

  <meta name = "viewport" content = "width = device-width, initial-scale=1">

  <title> AL-SABA.net </title>

</head>

<header>
  <h1> Title </h1>

  <h2> Personal Website </h2>
</header>
  
  
</html>