Center H1 title on a banner

I've created a page but I'm really stuck on something. I put a H1 title over an image banner but my H1 is not perfectly centered and I really don't understand why...

If you look at my screenshot you'll see that it looks centered but not perfectly: https://i.sstatic.net/cK9Af.png

Could you help me to figure out why?

Thanks :)

body{
	margin: 0;
	font-family: Arial;
}

header{
	position: relative;
	background: #262626;
	color: white;
	width: 100%;
	height: 10vh;
}

.logo{
	position: absolute;
	width: 100px;
	left: 100px;
	transform: translateY(-50%);
	top: 50%;
}

.banner{
	position: relative;
	height: 25vh;
	background-image: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), url("banner3.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.banner h1{
	position: absolute;
	color: white;
	font-weight: bold;
	top: 50%;
	left: 50%;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Landing Page</title>
</head>
<body>

<header>
	<img src="logo.svg" class="logo" alt="Modis logo">
</header>


<div class="banner">
	<h1>H1 Title</h1>
</div>


<content>
	<div class="left">
	<h2>H2 Title</h2>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus eros libero, lobortis semper neque porta sed. Aenean maximus et nunc at scelerisque. Nullam pulvinar, libero sed malesuada tempor, elit arcu porttitor urna, viverra dignissim elit dolor ut sapien. Suspendisse potenti. Mauris lacinia, neque at euismod tristique, ante tellus cursus nisl, non blandit neque lacus id erat. Vestibulum id varius libero. Aliquam tempor id eros non fringilla. Donec fringilla convallis nisi, vitae pulvinar mi finibus ac.
	<br><br>
	Ut ac euismod mi. Ut neque ex, aliquet non quam vitae, pretium sodales neque. Etiam viverra, sem vitae consequat imperdiet, nibh neque congue arcu, quis bibendum ligula ligula et sem. Pellentesque risus eros, laoreet ultrices augue vel, iaculis condimentum elit. Vivamus scelerisque leo quam, ut interdum lorem imperdiet non. Vivamus suscipit tincidunt faucibus. Proin quis mattis dui, id congue orci. Aliquam ornare at neque sit amet interdum. Nullam ut sapien nulla. Nunc molestie vitae elit ac sodales. Maecenas a laoreet orci. Donec accumsan eleifend congue. Aliquam erat volutpat. Duis tristique arcu eget turpis volutpat rhoncus. Morbi eu eros ac lectus tincidunt hendrerit.
	<br><br></p>

	<img src="wp-preview.png" class="wp-preview" alt="White Paper">
	</div>

	<div class="right">
		<form>
  			<fieldset>
    			<legend>Personal information:</legend>
    			<input type="text" name="lastname" placeholder="Last name">
    			<br>
    			<input type="text" name="firstname" placeholder="First name">
    			<br>
    			<input type="text" name="company" placeholder="Company">
    			<br>
    			<input type="text" name="email" placeholder="Email">
    			<br>
    			<input type="text" name="title" placeholder="Title">
    			<br>
    			<input type="text" name="telephone" placeholder="Telephone">
    			<br>
    			<select name="lastname">
    				<option value="Sydney">Sydney</option>
    				<option value="Sydney">Sydney</option>
    				<option value="Sydney">Sydney</option>
    				<option value="Sydney">Sydney</option>
    			</select>
    			<br>
    			<select name="lastname">
    				 <option selected disabled>Are you</option>
    				<option value="Sydney">Looking for new job opportunities</option>
    				<option value="Sydney">Looking to hire</option>
    				<option value="Sydney">Neither</option>
    			</select>
    			<br><br>
    			<input type="submit" value="Submit">
  			</fieldset>
		</form>
	</div>
</content>

</body>
</html>

Solution

You may easily do this by using flex. It allows us to perfectly align the content of elements as per our wish

.banner{
    position: relative;
    height: 25vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), url("banner3.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner h1{
    color: white;
    font-weight: bold;
}

This will create perfect vertical and horizontal alignment to center;