垂直居中问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html{
            margin: 0;
            padding: 0;
        }
        div{
            height: 200px;
            width: 300px;
            border: 1px solid #333;
        }
        ul{
            overflow: hidden;
        }
        h4 {
            font-size: 12px;
            line-height: 20px;
            width: 80%;
            height: 60px;
            border: 1px solid #000;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

    </style>

</head>
<body>
<div>
<ul>

    <h4>
        来喀什死了个框架送给大家感受感受是孤家估计睡来喀什死了个框架送给大家感受感受是孤家估计睡来喀什死了个框架送给大家感受感受是孤家估计睡
        
    </h4>
</ul>
</div>
</body>
</html>

当h4拿到的内容只有一行时候怎么垂直居中呢？
display: table-cell;
vertical-align: middle;
这个和display: -webkit-box;冲突了求解

阅读 2.9k

<div class="wrap"> <div class="content">试一下这个一行文字</div> </div> .wrap { width:80%; height: 60px; border: 1px solid #000; display: -webkit-box; -webkit-box-align: center } .content{ font-size: 12px; line-height: 20px; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

你内部大小明确，直接用margin: auto;和绝对定位就好了，flex的布局兼容性不是很好，IE和低端手机都不好用，传统的办法兼容性比较好

    <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul{
        height: 200px;
        width: 300px;
        border: 1px solid #333;
        position: relative;
        overflow: hidden;
    }
    h4 {
        font-size: 12px;
        line-height: 20px;
        width: 80%;
        height: 60px;
        border: 1px solid #000;
        overflow : hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
  </style> 
</head> 
<body> 
<ul>
    <h4>
        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
        
    </h4>
</ul>

</body>

垂直居中问题

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

图片沿着圆环的转动有什么方法吗？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

如何处理 CSS calc() 函数中的单位不一致问题？

js阻止冒泡问题？