css之多行居中

需求： 单行到多行文字居中。

<div>
     <p>应该为数组中的每个子代分配一个唯一的键。表格dataSource和中的值columns应遵循此规则。默认情况下</p>
</div> 

1.定位：

div{
    height: 120px;
    position: relative;
 }

p{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

2.flex

div{
    width: 600px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
ps:width,height只是举个例子，剩下的三个属性是必要的，子盒子不行要加额外的属性

3.inline-block+vertical-align

div{
line-height:120px;
}
p{
line-height: 24px;
    display: inline-block;
    vertical-align: middle;
}
ps:父盒子必须有line-height,vertical-align会依靠它来居中