关于居中的几种情况及解决方案

一、图片垂直居中
参考链接：https://www.jianshu.com/p/6516d925b4b1
HTML代码：

<div class="platetittle">
    <img class="plateimg" src="https://dummyimage.com/600x400/000/fff"/>
</div>

css代码：

.platetittle{
    height:110px;
    border-bottom: 1px solid #99a9bf;
    border-top: 1px solid #000;
    /*关键代码是下面这两行*/
    align-items: center; 
    display: flex;
}

.plateimg{
    width:80px;
    height:80px;
    /*关键代码是下面这行*/
    vertical-align: middle;
}

效果可在这个网站上在线试验：https://heqing0712.github.io/vue-codepen/

二、图文混排，图文垂直居中
参考自：http://www.yanglajiao.com/article/towrabbit/79630522
在父级元素的样式中设置display:flex，然后图文子级元素垂直方向上的margin都设为auto

三、文字居中
设置父元素的样式即可：text-align:center
示例：
HTML：

<div id="infoWord">
        确认删除此工具？
</div>

样式

#infoWord{
  font-size: 20px;
  text-align: center;
}

效果：