I created a webpage with 9 images total in 3 lines. Each line contains 3 images. I want to align all the images to the center of the page. Now the images align to the left. I tried to write text-align: center to the `<ul>` element with no success. Any ideas? 

---

image1 image2 image3

image4 image5 image6

image7 image8 image9

---

html:

```
<body>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

</body>

```

css: 

```
* {
    margin:0;
    padding:0;
}

ul {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
li {
    background: url('img/house.jpg') center;
    background-size: cover;
    width: 200px;
    height: 200px;
    top:33%;
    list-style:none;
    position:absolute;
    border: 1px solid red;
}

li:nth-child(-n+3) {
    top:0;

}
li:nth-child(n+7) {
    top:66%;

}
li:nth-child(3n+2) {
    left:33%;

}
li:nth-child(3n+3) {
    left:66%;
}

```