我已经创建了一个页面，但是我确实停留在某些东西上。我在图像横幅上放置了H1标题，但我的H1位置没有完全居中，我真的不明白为什么...
[如果您查看我的屏幕截图，您会发现它看起来居中但并不完美：https://i.stack.imgur.com/cK9Af.png
您能帮我找出原因吗？
谢谢：)
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>将transform: translateX(-50%);添加到您的h1中，它将按预期居中]
应该是这样。