CSS知识点总结（七）

CSS知识点总结

一、多行文字如何垂直居中？

1.使用table布局

.table {
    display: table;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    text-align: center;
}

.cell {
    display: table-cell;
    vertical-align: middle;
}

<div class="table">
    <div class="cell">
        <span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span>
    </div>
</div>

2.利用line-height和inline-block

父元素设置height===line-height，实现子内联元素的垂直居中，子元素设置inline-block,vertical-align实现文字垂直居中，并且设置line-height设置每段文字的行高。

div {
    width: 200px;
    height: 200px;
    margin: 10px;
    border: 1px solid #000;
    line-height: 200px;
    text-align: center;
}

span {
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
}

<div>
	<span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span>
</div>

这里必须得加vertical-align: middle;，这说明父元素中line-height: 200px;并不能让inline-block垂直居中。

3.使用inline-block，relative，transform

对比法二，不适用line-height使子元素垂直居中，而使用transform达到垂直居中的效果。

p {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    text-align: center;
}

p em {
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

<p>
   <em>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测</em>
</p>

这里子元素使用了relative还使用inline-block的原因是，仅使用relative还不能给元素设置大小且若不使用inline-block，transform不能获取准确的宽高，无法进行定位。

4.使用flex

.flex {
    display: flex;
    width: 200px;
    height: 200px;
    align-items: center;
    border: 1px solid #000;
}

<div class="flex">
  <div class="flex-item">
       <span>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</span>
   </div>
</div>