1.text-align: center——水平居中
仅对文字、图片、按钮等行内元素有效（display设置为inline或inline-block等）进行水平居中
2.height:60px;line-height:60px——垂直居中
不过要注意这种垂直方式的效果只能显示一行垂直居中
实例：
1.HTML
<div class="pro-main"><!-- 收藏的项目 --><div v-for="item of 5" :key="item" class="pro-storeitem"><span class="pro-icon">数</span><span class="prostore-name">数字化供所综合业务仿真教学平台{{item}}</span></div></div>
2.CSS
.pro-main {width: 270px;display: flex;flex-direction: column;align-items: center;.pro-storeitem {width: 270px;height: 65px;font-size: 16px;margin-top: 8px;border: 1px solid #ccc;display: flex;justify-content: center;align-items: center;.pro-icon {width: 20px;height: 20px;line-height: 20px;background-color: #9447ff;color: #fff;text-align: center;}.prostore-name {width: 200px;margin-left: 10px;}}}
3.效果
补充：
1、text-align: center——水平居中
仅对文字、图片、按钮等行内元素有效（display设置为inline或inline-block等）进行水平居中
2、margin: 垂直 auto——水平居中
仅水平居中，且对浮动元素无效
3、line-height——垂直居中
line-height=height，仅对一行文字有效
4、使用表格——水平、垂直居中
对 td / th 的 align='center' 和 valign='middle' 两属性可以水平和垂直集中
5、弹性布局——水平、垂直居中
display: flex;
justity-content: center;
align-items: center;
6、使用display: table-cell——水平、垂直居中
对于那些不是表格的元素，我们可以通过display: table-cell来把它模拟成一个表格单元格
7、子绝父相——水平、垂直居中
子元素设置为absolute，父元素设置为relative（当知道子元素的宽高）
-----------------------------------
改天具体补充更新本文章
