Aligning element to centre of the page

Question

I am making a simple page for school that has an email sign up box that I will liked centred to the middle of the page. The alignment worked at first but then I add a transition to part of the page which then aligned it at the top. I tried a few ways of aligning it but they do not seem to work. The css seems to be fine to me and my teachers. If someone could find the problem that would be great.

@import url('https://fonts.googleapis.com/css?family=Comfortaa');

*{
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    font-family: 'Comfortaa', cursive;
}

body{
    background: url('https://www.science.org/do/10.1126/science.aaf9937/abs/earthfromspace.jpg') no-repeat center;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

.container{
  width: 100%;
  margin: 0 auto;
  height: 75px;
  font-family: 'Comfortaa', cursive;
}

.wrapper{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    letter-spacing: 2px;
  position: relative;
}
.wrapper::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-left: -0.5ch;
}
.wrapper h1{
  margin-bottom: 40px;
  font-size: 42px;
  color: #000000;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}

.wrapper p{
    margin-bottom: 40px;
    color: #504e4e;
    font-size: 20px;
  position: absolute;
  display: inline-block;
  vertical-align: middle;
}

.newsletter{
    max-width: 550px;
    width: 100%;
    position: relative;
  display: inline-block;
  vertical-align: middle;
}

.newsletter .input{
    width: 100%;
    padding: 30px 100px 30px 60px;
    border-radius: 5px;
    border: none;
    font-weight: bold;
  display: inline-block;
  vertical-align: middle;
}

.newsletter .fas{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);    
    left: 20px;
    font-size: 20px;
  display: inline-block;
  vertical-align: middle;
}

.newsletter .btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 30px;
    background: #4dabf7;
    padding: 15px 20px;
    border-radius: 25px;
    font-size: 12px;
    letter-spacing: 5px;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
  display: inline-block;
  vertical-align: middle;
}

<div class="content"> 
  <div class="wrapper">
    <h1>Subscribe to our Newsletter to learn more about Climate Change</h1>
    <p>Receive updates instanly</p>
    <div class="newsletter">
  
      <input pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required type="email"
        class="input" placeholder="Enter Your Email">
      <i class="fas fa-envelope"></i>
      <a href="home.html">
        <div class="btn">Subscribe</div>
  
      </a>
    </div>
  </div>
</div>  
</body>

</html>

div it goes have to the middle of the page.

Answer 1

You can put the input and its info into its own container and position the entire container using viewport units, see: https://www.sitepoint.com/css-viewport-units-quick-start/ Your content class was missing so I just added it so you can see that it's working correctly. Hopefully you've got that and formatted it on your end.

@import url('https://fonts.googleapis.com/css?family=Comfortaa');

* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Comfortaa', cursive;
}

body {
  background: url('https://www.science.org/do/10.1126/science.aaf9937/abs/earthfromspace.jpg') no-repeat center;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

.content{
  display: block;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  margin: 0 auto;
  height: 75px;
  font-family: 'Comfortaa', cursive;
}

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  letter-spacing: 2px;
  position: relative;
}

.wrapper::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-left: -0.5ch;
}

.wrapper h1 {
  margin-bottom: 40px;
  font-size: 42px;
  color: #000000;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
}

.wrapper p {
  margin-bottom: 40px;
  color: #504e4e;
  font-size: 20px;
  position: absolute;
  display: inline-block;
  vertical-align: middle;
}

.newsLetterContainer {
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.newsletter {
  max-width: 550px;
  width: 100%;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.newsletter .input {
  width: 100%;
  padding: 30px 100px 30px 60px;
  border-radius: 5px;
  border: none;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
}

.newsletter .fas {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
}

.newsletter .btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 30px;
  background: #4dabf7;
  padding: 15px 20px;
  border-radius: 25px;
  font-size: 12px;
  letter-spacing: 5px;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  display: inline-block;
  vertical-align: middle;
}

<body>
  <div class="content">
    <div class="wrapper">
      <h1>Subscribe to our Newsletter to learn more about Climate Change</h1>
      <p>Receive updates instanly</p>
      <div class="newsLetterContainer">
        <div class="newsletter">
          <input pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required type="email" class="input" placeholder="Enter Your Email">
          <i class="fas fa-envelope"></i>
          <a href="home.html">
            <div class="btn">Subscribe</div>
          </a>
        </div>
      </div>
    </div>
  </div>
</body>