ahhh alguém pode me ajudar a colocar toda a barra de pesquisa centraliza no meio da tela mais alguma dica pode dizer
html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>NB boutique</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="nb.css">
</head>
<body>
<div>
<form>
<label for="pesquisa aqui"></label>
<input type="text" id="pesquisa aqui" class="input-padrao" required placeholder="o que você procura hoje"><button type="subimit" class="input"> <img src="lupa-de-pesquisa.png" ></button>
</form>
<h1><img class="caixa" src="468a0d7a-44ad-46e1-b0aa-7bd6dfc7a99c.jpg"></h1>
<nav class="relative-parent">
<ul class="relative">
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
<header>
</main>
<nav class="cabecalho">
<div class="cabeloja">
<ul>
</div>
<div class="compras">
<a href="carrinho.html">
<ol>
<li>Minhas compras</li>
<li><img class="carrinho" src="pngtree-vector-shopping-bag-icon-png-image_317908.jpg"></li>
</ol>
</a>
</div>
</ul>
</div>
</header>
</body>
</html>css
div{
background: #000000;
}
font-family: 'Montserrat', sans-serif;
}
header {
background: #000000;
}
nav {
position: absolute;
top: 110px;
right: 190px;
}
nav li {
display: inline;
margin: 0 0 0 30px;
}
.relative-parent {
background: #000000;
}
.relative {
background: #000000;
height: 100px;
width: 400px;
position: relative;
top: 70px;
left: 45px;
}
nav a {
text-transform: uppercase;
color: #bbbbbb;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
nav a:hover {
color: #C78C19;
text-decoration: underline;
}
form input{
display: block;
padding: 10px 25PX;
width: 50%;
width: 50%;
min-width: 250px;
display: inline-block;
vertical-align: top;
text-align: center;
height: 10px;
position: relative;
top: 0px;
left: 230px;
}
main {
width: 940px;
margin: 0 auto;
}
button {
width: 5%;
display: inline-block;
vertical-align: top;
margin-top: 0px;
}
.caixa {
position: relative;
left: 10em;
margin: 0 auto;
vertical-align: top 15px;
}
.input-padrao {
right: 70em;
vertical-align: top;
margin-top: 15px;
left: 0px;
}
.input{right: 450px; position:all;}
/*carrinho de compras*/
.compras img {
height: 30px;
width: 30px;
line-height: 10px;
right: 5px;
}
.compras {
font-size: 10px;
padding-right: 5px;
text-align: right;
height: 25px;
position: relative;
float: right;
bottom: 100px;
clear: right;
left: 180px;
margin-top: 15px;
}
.compras ol li {
display: inline;
text-align: center;
list-style-type: none;
}
.carrinho {
position: absolute;
bottom: 2px;
}
.compras a {
text-decoration: none;
}
.cabeloja {
left: 150px;
}
/*fim do carrinho de compras*/