Edit in JSFiddle

<div class="multiBox">
    <div class="outer clearfix">
        <div class="inner">
            <p>第一行文字
                <br/>第二行文字
                <br/>第三行文字
                <br/>
            </p>
        </div>
    </div>
</div>
<div class="outer">
    <div class="inner">
        <p>第一行文字</p>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}
.multiBox {
    float: left;
    margin-right: 10px;
}
.outer {
    background:#eee;
    height: 175px;
    width: 275px;
    position: relative;
    display: table-cell;
    vertical-align: middle;
    padding: 5px;
    border: 1px solid #ccc;
}
.inner {
    position:static;
    *position:absolute;
    top: 50%;
    width:100%;
    float:left;
}
p {
    background:#fff;
    position: relative;
    top: -50%;
    padding:10px;
    color: #222;
    font-size: 18px;
}
.clearfix:after {
    content:".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}