css技巧

技巧一

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

<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已经占满了容器，这个时候左对齐就在视觉上有效果了。