Centralization of ul in a strange way

.lista {
	margin:0 auto;
}

ul.listaTopo, ul.listaRegistros {
	margin:0 auto;
	padding:0;
	width:100%;
}

ul.listaTopo {
	background-color:#000;
	color:#FFF;
}

ul.listaTopo li, ul.listaRegistros li {
    display:inline-block;
	height:50px;
	line-height:50px;
	vertical-align:middle;
	text-align:center;
	font-weight:bold;
}

<div class="lista" style="width:900px">
  <ul class="listaTopo">
    <li style="width:100px">TIPO 
    <li style="width:400px">NOME 
    <li style="width:100px">LOGIN 
    <li style="width:100px">BLOQUEIO 
    <li style="width:100px">EDITAR 
    <li style="width:100px">EXCLUIR 
  </ul>
  <ul class="listaRegistros">
    <li style="text-align:left; width:100px; background-color:#CCC; color:#FFF">Super
    <li style="text-align:left; width:400px; background-color:#CCC; color:#FFF">Carlos Rocha
    <li style="text-align:center; width:100px; background-color:#CCC; color:#FFF">caca
    <li style="text-align:center; width:100px; background-color:#CCC; color:#FFF"><a href="" onclick="return verifica('Deseja Bloquear este Administrador?')" '=""><img src="_img/bloquear.png" height="30px" title="Bloquear Administrador"></a>
    <li style="text-align:center; width:100px; background-color:#CCC; color:#FFF"><a href="administradoresEditar.php?acao=form&amp;idAdmin=1"><img src="_img/editar.png" height="30px" title="Editar Administrador"></a>
    <li style="text-align:center; width:100px; background-color:#CCC; color:#FFF"><a href="" onclick="return verifica('Deseja Excluir este Administrador?')" '=""><img src="_img/excluir.png" height="30px" title="Excluir Administrador"></a>
  </ul>
</div>