How to center Diaporama in a page

Question

I use diaporama from http://www.guillaumevoisin.fr/ It's Ok for running diaporama. But I try to center my images in my page.

 <ul class="diaporama1">
    <asp:Repeater ID="rptImg" runat="server">
        <ItemTemplate>
            <li>
                <div class="wrapper">
                    <img id='<%# Eval("Id")%>' src='<%# Eval("path") & "/" & Eval("Img")%>'
                        alt='<%# Eval("Alt")%>' title='<%# Eval("Title")%>' style="max-height: 320px;" />
                </div>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

I try several ways with display or text align include in div ... But nothing. The only way I found it's but I see a slide of all bloc on the first picture. I've several width ... And I try to download last version but link are disabled... Someone can help me? Even If I need change diaprama. I just want a diaporama where I can click and center my pictures.

Update : Here the html generated

<div style="width:960px;">
  <ul class="diaporama1">
    <li>
       <div class="wrapper">
         <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT9l4Be-g7PvpIdSrBkt_G9iZkUvj-dsR4VfELe4nYy12ibVXvo"  style="max-height: 320px;" />
       </div>
    </li>
    <li>
      <div class="wrapper">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSa9o33IgU9JNNYUW-gHhs5V8XXCsbbBeN3_UAO9Am7KbxakMVAZw"  style="max-height: 320px;" />
      </div>
    </li>
</ul>

and the CSS

.wrapper {
margin:auto;
width:900px;
text-align:center;
}

Update 2 : I find a better way,

<div style="width:100%;">
    <div style="display: table;margin: 0 auto;">
        <ul class="diaporama1">
            <asp:Repeater ID="rptImg" runat="server">
                <ItemTemplate>
                    <li>
                        <div style="text-align: center;width:400px;">
                            <div style="display: inline-block;">
                                <img id='<%# Eval("Id")%>' src='<%# Eval("path") & "/" & Eval("Img")%>'
                                    alt='<%# Eval("Alt")%>' title='<%# Eval("Title")%>' style="max-height: 320px;max-width:400px;" />
                            </div>
                        </div>
                    </li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
    </div>
</div>

But just on the first display, I see a slide rigth to left until center...

Answer 1

Force to try ... I Find in same time how center vertically

 <div class="center-Accueil SizePhoto-Accueil">
    <ul class="diaporama1">
        <asp:Repeater ID="rptImg" runat="server">
            <ItemTemplate>
                <li>
                    <div class="SizePhoto-Accueil">
                        <div class="CenterImg">
                            <img id='<%# Eval("Id")%>' src='<%# Eval("path") & "/" & Eval("Img")%>'
                                alt='<%# Eval("Alt")%>' title='<%# Eval("Title")%>' style="max-height: 320px; max-width: 400px;" />
                        </div>
                    </div>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
</div>

And my css

.SizePhoto-Accueil {
width: 400px;
height: 320px;
}

.center-Accueil {
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

.CenterImg {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}