css进行文字居中（多行文字居中问题）
多行文字要想对齐使用line-height是实现不了的，他就等同于的让一个不设置宽高的div垂直居中，就像下面图这种效果。
<style>
.content{
width: 800px;
margin: 500px auto;
}
/* 定位写法 */
/* .box{
display: inline-block;
vertical-align: middle;
margin-left: 30px;
border-radius: 20px;
width: 200px;
height: 200px;
border: 1px solid #eee;
position:relative;
}
.text{
position: absolute;
top: 50%;
transform: translateY(-50%);
} */
/* table布局 */
/* .box{
margin-left: 30px;
border-radius: 20px;
width: 200px;
height: 200px;
border: 1px solid #eee;
display: table;
}
.text{
display: table-cell;
vertical-align: middle;
} */
/* flex布局 */
.content{
display: flex;
justify-content: space-around;
}
.box{
display: flex;
align-items: center;
border-radius: 20px;
width: 200px;
height: 200px;
border: 1px solid #eee;
}
</style>
<body>
<div class="content">
<div class="box">
<div class="text">这是一个很长很长的故事</div>
</div>
<div class="box">
<div class="text">这是一个很长很长的故事这是一个很长很长的故事这是一个很长很长的故事这是一个很长很长的故事</div>
</div>
<div class="box">
<div class="text">这是一个很长很长的故事这是一个很长很长的故事这是一个很长很长</div>
</div>
</div>
</body>