用CSS使多行文字垂直居中

项目中经常遇到的问题，在此写出处理多行文本垂直居中的两种方法。先把代码写上吧，直接看很清楚。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>让多行文本在容器中垂直水平居中</title>
  <style>
    /***第一种方法 普通设置行高方法***/
    .box{
      width:400px;
      height:300px;
      line-height:300px;/*父级容器记得设置行高*/
      background:rgb(164, 214, 179);
    }
    .box-son{
      display:inline-block;/*文字容器要转成行内块元素*/
      width:100%;
      height:auto;
      line-height:30px;
      vertical-align: middle;/*设置元素垂直对齐方式为中部*/
      background:#eee;
    }

    /***第一种方法 使用flex布局方法***/
    .boxt{
      display:flex;
      align-items: center;/*垂直轴居中*/
      justify-content:center;/*使容器内元素水平轴居中，此处旨在说明属性作用*/
      width:500px;
      height:300px;
      background:rgb(57, 175, 211);
      margin-top:20px;
    }
    .boxt-son{
      flex:0.6;/*设置元素占父元素长度的比例*/
      display:flex;
      line-height:30px;
      background:#eee;
      text-align:center;
    }
  </style>
</head>
<body>
  <!-- 方法一 -->
  <div class="box">
    <span class="box-son">
      遇上你是我今生最大的幸福，你可以不相信我说的话，但一定是真的。
    </span> 
  </div>
  <!-- 方法二 -->
  <div class="boxt">
    <span class="boxt-son">
      遇上你是我今生最大的幸福，你可以不相信我说的话，但一定是真的。
    </span>
  </div>
</body>
</html>

代码中用到两种方式去处理，方法一：使用设置行高的方式。方法二：使用flex布局及css属性去处理，此方法不兼容ie10以下ie慎用，具体查阅flex布局特点。

posted @ 2020-03-23 22:36  Monter  阅读(1319)  评论(0)  编辑  收藏  举报