Problemas com alinhamento de div usando ui:repeat

Olá galera, estou tento dificuldades em alinhar uma div no centro da pagina, nao importa o que eu faça ela sempre fica a esquerda.
Porem esse problema só acontece se eu tiver componentes do prime faces dentro dessa div, se eu tirar eles o problema é resolvido.
A página fica como no arquivo que vou por em anexo.
Meu código esta assim:
Esse é o template, essa div é aquela div que fica desalinhada

<div id="centro" align="center" style="background-image: url(../img/fundo_conteudo.jpg); margin: auto; width: 1000px; height: auto;overflow: auto;" >
            <ui:insert name="conteudo">
                Espaço para o conteudo !!!
            </ui:insert>
            <br/><br/><br/>
        </div>

E essa é a minha pagina que usa o template acima:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:composition template="/templates/template.xhtml">

        <ui:define name="titulo">ACCI - Associação Casquense de Cultura Italiana</ui:define>

        <ui:define name="conteudo">

            <p:growl id="growl" showDetail="true" life="5000" autoUpdate="true"  />
            
            <h2>Página de Eventos</h2>
            
            <ui:repeat value="#{visualizarEvento.listEventos}" var="evento">
                
                <p:panel header="#{evento.nome}" style="width: 800px;">
                    <h:outputText value="#{evento.nome}" />
                    <hr/>
                    <h:outputText value="#{evento.descricao}" />
                </p:panel>
                <br/>
                
            </ui:repeat>

        </ui:define>

    </ui:composition>
</html>

Topicos relacionados