HTML Não consigo centralizar input search

Renan Leite BL · 1 de dezembro de 2017

Fala galera, to quebrando a cabeça com isso tem dias, mas não consigo de maneira alguma kkkk alguem poderia me ajudar?

Por algum motivo eu não estou conseguindo centralizar esse maldito input search, o meu resultado é sempre esse ou pior:

O meu html está assim:

E o meu css está assim:

Renan Leite BL · 2 de dezembro de 2017

Galera consegui alinhar, alguém sugere algo?

Ficou assim:

Essa barra laranja é só para ter noção onde tem que ficar o conteúdo...

<body>
	<div id="navegacao">
		<div id="area">
			<div id="logo">
				<img src="img/logo.png">
			</div>				
			<div id="pesquisa">
				<input type="search" name="buscar" placeholder="Buscar no site...">
			</div>
		</div>		
	</div>
</body>

* {
	margin: 0;
	padding: 0;
}

#navegacao {
	width: 100%;
	height: 58px;
	background: blue;		
}

#area {
	width: 80%;	
	margin: 0 auto;	
	position: relative;
	border: 3px solid orange;
}

#logo {

	display: inline-block;
	width: 20%;	
	float: left;
	margin-left: -20px;
}

#pesquisa {	
	position: absolute;
	width: 20%;		
	border: 2px solid gray;	
	float: left;
	margin-left: 40%;
	top: 16px;		
}

#pesquisa input {
	width: 100%;
}

DiF · 2 de dezembro de 2017

@Renan Leite BL

Você pode fazer desta maneira também:

#navegacao{
   width: 100%;
   height: 50px;
   background: yellow;
   position: relative;
}

#area{
  width: 960px;
  height: 50px;
  margin: 0 auto;
  background: blue;
}

#logo{ display: inline-block; }

#pesquisa{
  background: red;
  position: absolute;
  left: 50%;
  line-height: 50px;
  height: 50px;
  display: inline-block;
}