如何实现如下的文字居中

Question

之前都是通过

.box {
    text-align:center;
    line-height: 100px; 
}

来实现文字的居中,但是只能是一行文字「由于设置了line-height」

求助该如何实现该效果

Answer 1

1.给box添加padding的方式（类似把中间的文字挤在中间，具体左右padding大小要你自己去设置 ）
2.给box添加：after或者before 伪元素

box{
    display:inline-block;
    vertical-align:middle;
    text-align:center;
}
box:after{
    display:inline-block;
    content:'';
    height:100%;
    width:0;
    vertical-align:middle;
    text-align:center;
}

Answer 2

我尝试在input里写了，就是不能换行，可以参考下。

<input type="text" readonly="readonly" value="100">
<style>
input{
    border:5px solid #000;
    height:120px;
    text-align:center;
    font-size:24px;
    width:240px;
    overflow:hidden;
}
</style>

测试链接

Answer 3

之前我也问过这个问题，有人给了挺全面的回答。
css垂直居中的问题

Answer 4

试一试这个！

.wrap{display: table; width: 500px; height: 400px; border:1px solid #ccc;}
.content{display: table-cell; vertical-align: middle; text-align: center;}
.title{font-size:200%; color:lightblue; font-weight:700}



<div class="wrap">
    <div class="content">
        <span class="title">标题</span><br />
        i'm find
    </div>
</div>