CSS：多行文本水平垂直居中，少于一行文本居中，多余一行文本居左（试用于对话提示框）

今天在弄一个错误提示框，UI的要求是短消息提示时，消息在弹窗中居中对齐；多行消息时，要求在弹窗中左对齐。当然垂直对齐是必须的。下面先给一个简单的demo：

<div class="box">
<div class="center">
<div class="contents">我要居中,我要居中</div>
</div>
</div>

.box{
display: table;
margin: 0 auto;
width: 400px;
height:300px;
background-color: gray;
}
.center{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.contents{
display: inline-block;
text-align: left;
}   

单行多行

box和center的作用是保证contents一直处于水平和垂直居中的状态；.contents中的text-align:left让contents的文本居左。所以在不足一行的时候，虽然contents的文本左对齐，但是因为它是display为inline-block,所以处在容器的中间；当多行的时候，contents已经占满了容器，这个时候左对齐就在视觉上有效果了。

这是成品。