关于css实现多⾏⽂字垂直居中的⼏种⽅法
关于css实现多⾏⽂字垂直居中的⼏种⽅法
  在我们写前端页⾯的过程中，经常会⽤到居中。居中⼜分为了⽔平居中和垂直居中，⽔平居中时，我们直接设置元素margin：0 auto;，⽽对于⼀⾏⽂字垂直居中也很常见，设置⽂字line-height属性值为⽗元素的⾼度即可相对于⽗元素垂直居中。但当我们遇到多⾏⽂字垂直居中⽽⽗元素的⾼度⼜不确定时，就会出现⼀些问题，下⾯写出⾃⼰平时会⽤的⼀些⽅法：
1.display:table;
  对于display：table；和displpay:table-cell；平时我也不是太了解，但它俩在⼀起可以解决居中的问题。
上代码：
html部分：
<div class="box1">
<span>红酥⼿，黄縢酒，满城春⾊宫墙柳。
东风恶，欢情薄。⼀怀愁绪，⼏年离索。错、错、错。</span>
</div>
css部分：
.box1{
width: 300px;
height: 300px;
background-color: skyblue;
display:table;
}
.box1 span{
display:table-cell;
vertical-align: middle;
}
实现的效果：
2.line-height与vertical-align
  将要居中的⼦元素看做⼀块，利⽤line-height和vertical-align进⾏设置。
html部分：
<div class="box1">
<span>春如旧，⼈空瘦，泪痕红浥鲛绡透。
桃花落，闲池阁。⼭盟虽在，锦书难托。莫、莫、莫！</span>
</div>
css部分：
.box1{
width: 300px;
height: 300px;
background-color: skyblue;
line-height:300px;
}
.box1 span{
display:inline-block;
line-height:18px;
vertical-align: middle;
}
  这⾥box1的ling-height要与盒⼦的⾼相同，是为了后⾯⼦元素⽽设置基线。⽽⼦元素设置display:inline-block；是为了⾃⼰设置合适的line-height。
实现的效果：
  对⼦元素进⾏相对定位，再让其做平移变换。
html部分：
<div class="box1">
<span>世情薄，⼈情恶，⾬送黄昏花易落。
晓风⼲，泪痕残，欲笺⼼事，独语斜阑。难，难，难！</span>
</div>
css部分：
.box1{
css设置文字垂直居中width: 300px;
height: 300px;
background-color: skyblue;
}
.box1 span{
display: inline-block;
position: relative;
top:50%;
transform: translateY(-50%);
}
实现的效果：
4.display:flex;
  利⽤弹性布局，直接设置align-item属性，对⼦元素进⾏垂直居中。html部分：
<div class="box1">
<span>⼈成各，今⾮昨，病魂常似秋千索。
⾓声寒，夜阑珊，怕⼈寻问，咽泪装欢。瞒，瞒，瞒！</span>
</div>
css部分：
.box1{
width: 300px;
height: 300px;
background-color: skyblue;
display: flex;
align-items: center;
}
实现的效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。