关于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。

实现的效果：

3.transform: translateY

  对子元素进行相对定位，再让其做平移变换。

html部分：

<div class="box1">
        <span>世情薄，人情恶，雨送黄昏花易落。
        	  晓风干，泪痕残，欲笺心事，独语斜阑。难，难，难！</span>
    </div>

css部分：

 .box1{
            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;
        }

实现的效果：