Css 如何在div中居中放置图像

我试图将图像放在.pics div的中心，但是css不起作用

<article class="pics"> 
         <ul>
            <li><img class="default" alt="cake" src="images/IMG_2774_opt.jpg"></li>
            <li><img class="default" alt="cake" src="images/198_opt.jpg"></li>
            <li><img class="default" alt="cake" src="images/IMG_2774_opt.jpg"></li>
         </ul>  
</article>

CSS:

.pics{
宽度：100%；
垂直对齐：中间对齐；
}

不起作用

HTML:

---

我想给你们指出一个非常简单的解决方案

IMG.已显示{
显示：块；
左边距：自动；
右边距：自动}
...

如果要垂直对齐，则必须具有height属性。请尝试为无序列表和图像添加CSS，或者添加指向活动示例的链接。这将大有帮助。

<div class="center" >
    <div class="centered">
        <div class="img"></div>  
    </div>
</div>

.center{
    height:200px;
    width:200px;
    background:black;
    display:table;
}
.centered{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.img{
    display:inline-block;
    background:yellow;
    height:50px;
    width:50px;
}

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">