3 个回答

直接设置上下相同的padding就可以了, 可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。。而高度变化正好是题主的要求。demo:

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <title> 多行文字实现垂直居中 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        .tx-verti-center{
            padding: 25px;
            border: 1px solid #FF0099;
            width: 760px;
        }
    </style>
</head>

<body>
    <div class="tx-verti-center">
        现在我们要使这段文字垂直居中显示!阿萨德黄金卡撕掉会阿萨德卡时间段卡拉胶考虑到静安寺来看待
            阿萨德黄金卡撕掉会阿萨德卡时间段卡拉胶考虑到静安寺来看待
            阿萨德黄金卡撕掉会阿萨德卡时间段卡拉胶考虑到静安寺来看待
        
        
    </div>
    <div  class="tx-verti-center">
        现在我们要使这段文字垂直居中显示!阿萨德黄金卡撕掉会阿萨德卡时间段卡拉胶考虑到静安寺来看待
          
        
        
    </div>


</body>
</html>


mogita
  • 4
新手上路,请多包涵

用 flex 布局,配合属性 align-items: center 来实现。

  1. flex布局最简单快捷

  2. absolute定位,top:50%;transform3d: (0, -50%, 0);

  3. 中间的文字区域设置为display: inline-block; vertical-align: middle;

宣传栏