Centralizar div

Bom dia pessoal, estou fazendo um site e estou com um problema para centralizar um objeto no meio da página, podem me ajudar? No código html:

<div class="transicoes">
</div>

No código CSS:

.transicoes{
position:absolute. top:20%. left:50%. margin:auto. width:70%. height:400px. background:#9F6F70. margin-left:250px. margin-top:150px. }

é só um simples quadrado, quero que ele fique um pouco abaixo da linha de menus mas ele está se posicionando no lado direito da página

.transicoes{

 position:absolute;

 top:20%;

 left:50%;

 transform: translateX(-50%);

 width:70%;

 height:400px;

 background:#9F6F70;

}