line-height多行文字居中

作者: 胡儒清 | 来源:发表于2018-11-23 08:29 被阅读38次

多行文字垂直居中显示
2016-12-19
line-height多行文字居中
HTML 水平居中和垂直居中
关于html中用css居中一些方案总结
2018-07-24 多行文字的垂直居中，使用line-heig
CSS面试题(一)
如何垂直居中一个元素
11.文本相关属性
文字垂直居中

单行文字居中

文字只有一行的时候，我们是这样居中的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="box">
                Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash
        </div>
    </body>
</html>

<style type="text/css">
    .box {
        border: 1px solid green;
        height: 200px;
        line-height: 200px;
    }
</style>

效果如下：

image.png

但文字如果有多行就玩不转了

多行文字居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="box">
            <div class="content">
                Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。
            </div>
        </div>
    </body>
</html>

<style type="text/css">
    .box {
        border: 1px solid green;
        height: 400px;
        line-height: 400px;
    }
    .content {
        display: inline-block;
        line-height: 30px;
        vertical-align: middle;
    }
</style>

效果如下

image.png