How do i center a div class?

Question

I am having trouble centering a div class. I want the div class to be centered in the page as i scroll at the moment it is stuck on the left. I have tried floating it center which did nothing and am just an amateur so not sure what else to 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;
}

Answer 1

Try this code

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

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