Estou tentando fazer uma entrada centralizada com uma imagem acima. Estou fazendo isso seguindo a documentação da posição , mas de alguma forma a imagem não fica centralizada horizontalmente:
Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>Title</title>
<!-- Css -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container position-absolute top-50 start-50 translate-middle">
<embed class="logo" src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo">
<form action="/streams" method="POST">
<div class="input-group">
<input class="form-control border-danger border-5" type="text" aria-describedby="start-button">
<button class="btn btn-danger" type="submit" id="start-button">Click</button>
</div>
</form>
</div>
</body>
</html>
Já tentei fazer isso manualmente e usando display flex , mas sem sucesso.