一、
1、容器内部元素上下左右居中
2、内部元素每行的高度以最高的为准
<div style="margin-top: 10px;
border: 1px solid #c5c5c5;
display:flex;
flex-wrap: wrap;
justify-content: center;
align-content:center;
height: 100px;
">
<div class="item" style="align-items: center;">
111<br/>111
</div>
<div class="item" >
2
</div>
<div class="item" >
3
</div>
<div class="item" >
4
</div>
</div>
二、单行文字设置上下居中
设置文本的行高实现上下居中
只有单行文字适用
<div style="background-color:red;height:100px;line-height:100px;" >
hello word!
</div>
其他样式
1、背景渐变样式
<div style="background-image:linear-gradient(to top,#96e15d 0%,#00e3ae 100%);
width:100px;
height:100px;" >
</div>