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

推荐阅读更多精彩内容