html - How do i center a div class? -

i having trouble centering div class. want div class centered in page scroll @ moment stuck on left. have tried floating center did nothing , amateur not sure else try.

html

<div class = "container">     <ul>         <li class = "image">         <img src = "blackbox.jpg" height="200px">         </li>          <li class = "image">         <img src = "blackbox.jpg" height="200px">         </li>          <li class = "image">         <img src = "blackbox.jpg" height="200px">         </li><br>          <li class = "image">         <img src = "blackbox.jpg" height="200px">         </li>          <li class = "image">         <img src = "blackbox.jpg" height="200px">         </li>          <li class = "image">         <img src = "blackbox.jpg" height="200px">         </li><br>          <li class = "image">         <img src = "blackbox.jpg" height="200px">         </li>          <li class = "image">         <img src = "blackbox.jpg" height="200px">         </li>          <li class = "image">         <img src = "blackbox.jpg" height="200px">         </li>          </ul> </div> 

css

.image { display: inline; padding: 0 10px 10px 10px; }  .container { width: 700px; } 

try code

.container{     width: 700px;      margin: 0 auto;     } 

see demo http://jsfiddle.net/jentidabhi/4q9j40m1/