Sei que dá pra melhorar esse código em relação a posicionamento, de uma forma mais automatica e proporcional, só não to lembrando como, alguém pode me ajudar? Tipo, ao invés de dar a localização exata do top e right, gostaria que h1 ficasse centralizado no background, tanto em x quanto y.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title class="titulo-pagina">Gastronomia Chica</title>
<meta name="viewport" content="width=device-width">
<!--CSS DA PÁGINA-->
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<!--FONTE UTILIZADA-->
<link href="https://fonts.googleapis.com/css2?family=Amiri&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Gastronomia Chica</h1>
</header>
</body>
</html>css
body {
font-family: 'Amiri', serif;
}
header {
background: url(banner.jpg);
width: 100%;
height: 100px;
text-align: center;
}
h1 {
display: inline-block;
font-weight: bold;
font-size: 50px;
position: absolute;
left: 492.5px;
top: 25px;
text-shadow: 1px 1px 5px #FFFFFF;
}
