杰拉斯的博客

[CSS3] 纯 CSS 实现未知高度垂直居中

杰拉斯 杰拉斯 | 时间：2015-12-17, Thu | 26,216 views
前端开发　 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>纯CSS实现未知高度垂直居中</title>
    <style>
    .outer {
        font-size: 0;
        height: 200px;
        background: #0099ff;
        white-space: nowrap;
    }
    
    .outer:before {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    
    .inner {
        font-size: 14px;
        white-space: normal;
        display: inline-block;
    }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            第一行<br>第二行<br>第三行
        </div>
    </div>
</body>
</html>

如需转载请注明出处：杰拉斯的博客

相关文章

4 条评论 »

  1. seven seven

    你好，请问这个博客用的是什么主题？挺好看的，但在几个主题站里找也没找到

    回复
    1. 蓝飞 蓝飞

      自己设计的哦：）

      回复
  2. 礼品茶 礼品茶

    博主的主题确实不错！感觉很舒服！

    回复
  3. beryl beryl

    复制代码试了一下好像没有居中

    回复