现在，我的文本在屏幕中间，但是如果我使用较小的笔记本电脑或放大/缩小，则文本的位置会更改（“开始输入”）。
现在有人可以解决这样的问题吗？在我看来，该如何解决？
非常感谢您能抽出宝贵的时间来完成本主题，非常感谢所有帮助。
body {
position: relative;
background-color: black;
height: 100%;
line-height: 1;
font-family: "Arial";
}
#section1 {
height: 100vh;
color: #fff;
background-color: transparent;
}
#section2 {
padding-top: 50px;
height: auto;
color: #fff;
background-color: transparent;
}
#section3 {
padding-top: 50px;
height: auto;
color: #fff;
background-color: transparent;
}
#section4 {
padding-top: 50px;
height: auto;
color: #fff;
background-color: transparent;
}
#section5 {
padding-top: 50px;
height: auto;
color: #fff;
background-color: transparent;
}
.straatfoto {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(https://i.ibb.co/WppGWkx/straat.jpg);
background-size: cover;
background-position: center;
width: 100%;
}
.centered {
/* maak tekst in het midden*/
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
.voorstellen {
max-width: 35%;
font-size: 20px;
color: white;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
font-family: "Arial", sans-serif;
padding-top: 20px;
}
.knop {
/* start knop */
margin-left: 100%;
z-index: 100;
}
.knop1 {
/* start knop*/
border: 3px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
background-color: darkorange;
font-family: "Roboto", sans-serif;
margin-left: -315px;
}
h1.startdereis {
/* tekst met start de reis */
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
font-family: "Arial", sans-serif;
font-weight: bold;
z-index: 100;
margin-top: 160%;
}
h2 {
display: block;
font-size: 1.5em;
font-weight: bold;
}
.logo { /* De leeuw linksbovenin */
width: auto;
height: 70px;
filter: brightness(0) invert(1);
float: left;
margin-left: 50%;
}
.knop a {
position: absolute;
}
.navbar-nav {
float: right;
margin-right: 100px;
font-size: 16px;
}
.navbar-nav li a {
line-height: 40px !important;
margin-left: 15px;
margin-right: 15px;
}
.container-fluid {
background-color: black;
}<!DOCTYPE html>
<html>
<head>
<title>Duco's Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style3.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#"><img class="logo" src="http://www.pngonly.com/wp-content/uploads/2017/06/Lion-Tattoo-Clipart-PNG-Image-03.png"></a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Home</a></li>
<li><a href="#section2">Voorstellen</a></li>
<li><a href="#section3">Hobby's</a></li>
<li><a href="#section4">Toekomstdromen</a></li>
<li><a href="#section5">About</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1">
<div class="straatfoto" id="section1">
<div class="centered" style="z-index:102">
<h1 class="startdereis">Start De Reis</h1>
<div class="knop" onclick="myFunction()">
<a href="#section2" class="knop1"> Start </a>
</div>
</div>
</div>
</div>
<div id="section2" class="container-fluid">
<div class="voorstellen">
<h2>Wie ben ik?</h2>
<p>
Mijn volledige naam is Duco Gerard van de Schepop. Mijn tweede naam komt van mijn hele muzikale opa, die ik helaas nooit gekent heb. Op het moment dat ik werd geboren had ik geen opa's meer en nog maar een oma. Mijn enige oma die nog leefde woonde
in Duitsland. We zochten haar meestal om de vakantie op. Voor mij was het meestal best saai want ik sprak toen ik klein was nog geen Duits, dus was het moeilijk om met mijn oma te praten en in een bejaardenhuis is nou eenmaal weinig te doen. Toen
ik in de tweede klas wat Duits had geleerd en zover was om zelf een gesprek met mijn oma aan tegaan i.p.v dat mijn ouder het zouden vertalen stierf mijn rond die tijd jammer genoeg.
<br><br>
Het was misschien al een beetje duidelijk maar ik heb dus een familie die dus uit Duitsers en uit Nederlanders bestaat. Contact hebben met de Duitse kant van de familie is erg lastig omdat het best een stuk rijden is naar Duitsland. Als
ik dus tijd doorbreng met famillie is het meestal met de famillie uit Nederland, wat ik eigenlijk niet heel erg vindt. Ik heb een hele leuke familie en daar ben ik erg blij mee.
<br><br>
Nu even genoeg over mijn opa's en oma's. Ik woon vijtien jaar in Soest met mijn vader, moeder en sinds dat ik drie werd ook een kleiner zusje. Er is niet echt iets bijzonders dat ik kan vertellen over mijn gezin, we zijn gewoon gewoontjes.
Ikzelf zit op dit moment in de vierde klas op Het Baarnsch Lyceum. Mijn paket is NT en het gaat me wel goed af. De school vindt zelf dat ik het zo goed doe dat ik drie uur in de week niet meer hoef te komen. Heel bijzonder is het ook weer niet want
die uren waren toch een soort van tussenuren. De bedoeling is dat je in deze uren, waar ik dus niet meer heen ga, huiswerk kan/moet maken dit doet alleen bijna niemand en iedereen zit eigenlijk gewoon te wachten totdat het saaie uur voorbij is.
<br><br>
Ik hoop dat ik nu genoeg over mezelf heb verteld en dat je nu al beter weet wie ik ben. Ik weet dat ik niet een heel spannend vaarhaal heb maarja, ik moet nou eenmaal een blog maken hè.
</p>
</div>
</div>
<div id="section3" class="container-fluid">
<div class="voorstellen">
<h2>Mijn hobby's</h2>
<p>
Toen ik in groep vijf zat vonden mijn ouders het maar een tijd dat ik op een sport ging. Op dat moment zat ik op scouting waar ik toen iedere zaterdag naar toe ging. Via een kies je sport folder ben ik op klimmen gekomen. Dit vond ik tijdens de proeflessen erg leuk maar al snel werd het saaier en saaier dus daar was ik snel weer van af. Vervolgens ben ik op honkbal gegaan, hier zit ik tot de dag van vandaag nog steeds op en ik heb nog steeds veel plezier tijdens het honkballen. Een sport vinden die ik leuk vond en een sport waar je niet snel geblesseerd kan raken, want ik raak heel snel geblesseerd, was heel erg moeilijk. Daarom ben ik dan ook heel erg blij dat ik honkbal heb geprobeerd.
<br><br>
Naast honkbal heb ik nog andere hobby's, vooral achter de computer of op de televisie. Ik vind het namelijk erg leuk om te gamen. Ik heb ook iets van tien verschillende spellen. Hier een klein lijstje van enkele populaire spellen die ik speel:
</p>
<ul>
<li>Overwatch</li>
<li>GTA V</li>
<li>Fortnite</li>
</ul>
<p>
Ook vind ik het heel fijn om af en toe een Netflix film te kijken of om een YouTube video te kijken.
<br><br>
De laatste hobby maar wel een van de leukste is piano spelen. Ik speel al sinds dat ik klein ben piano en tot de dag van vandaag ben ik er druk mee bezig. Toen ik kleiner was voelde het meer als een verplichting en was ik niet zo gemotiveerd maar nu ik wat ouder ben kan ik meer mijn eigen smaak uitkiezen en krijg ik meer plezier met piano spelen.
</p>
</div>
</div>
<div id="section4" class="container-fluid">
<div class="voorstellen">
<h2>Toekomstdromen</h2>
<p>
lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
</p>
</div>
</div>
<div id="section5" class="container-fluid">
<div class="voorstellen">
<h2>About</h2>
<p>
Deze website is volledig geschreven en bedacht door Duco van de Schepop uit VWO4, natuurlijk heb ik wel hulp gebruikt van verschillende bronnen zoals <a href = "https://www.w3schools.com/" target="_blank">W3Schools</a> en <a href = "https://stackoverflow.com/" target="_blank">Stack Overflow.</a> Op Stack Overflow heb ik in totaal 9 verschillende dingen gevraagd waarvan ik uiteindelijk maar 3 verschillende dingen heb kunnen gebruiken, die niet eens zo heel bijzonder zijn.
(klik <a href="https://stackoverflow.com/users/10761756/duco-van-de-schepop?tab=questions&sort=votes" target="_blank">hier</a> om mijn pagina op Stack Overflow te bekijken)
<br><br>
Ik heb niet echt een bepaald idee gevolgd toen ik mijn site aan het maken was. Het komt erop neer dat ik eerst gewoon een beetje aan het uittesten was hoe alles nou precies werkte. Ik heb mijn site ook verschillende keren opnieuw gebouwd en dit is hoe de site er eerst uit zag: klik <a href="index.html">HIER.</a> Het lijkt alsof er niet heel veel veranderd is maar kwa code en manier van programmeren was het toch heel anders om de website te maken.
<br><br>
Ik wist niet precies wat voor soort site ik wilde maken maar ik wist wel dat hij er strak uit moest zien. Ik vind dan ook dat dit zeker goed is gelukt!
<br>
Deze versie van mijn website is vooral aan de hand van <a href="https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp" target="_blank">deze</a> pagina gemaakt.
</p>
</div>
</div>
<footer>
</footer>
</body>
</html>