居中

.class{
top:50%;
left:50%;
transform: translate(-50%, -50%);
}

Flex

.class{
display: flex;
justify-content: flex-start;
align-items: center;
// space-between
}

.class{
//不被压缩/放大
flex-grow: 0;
flex-shrink:0;
//占据剩余空间
flex-grow: 1;
// 竖直由上向下排列
flex-direction: column;
// 由下向上
flex-direction: column-reverse;
// 换行 第一行在上方
flex-wrap: wrap
}

文本溢出显示省略号

.class{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
word-wrap:break-word;
word-break

不被挤

    flex-grow: 0;
    flex-shrink:0;

文字换行

white-space: pre-wrap;