在現實工作中，很多時候會有一些比較奇怪的需求，但即使是奇怪，但還是需要去實現。最近，在工作中，遇到一個需求，是這樣的：
1、標題只有一行文字的時候，整個標題在一個div中需要垂直水平居中，文字也是居中對齊
2、當標題超過一行的時候，那么標題在這個div中需要垂直水平居中，但是文字變成了左對齊
根據如上描述，其實所用到的知識點也就那么幾個:
1、未知高度的盒子在已知寬高的盒子中垂直水平居中
2、通過媒體查詢或者js判斷當文字的這個容器超過了一定的高度的時候，文字左對齊
多行標題顯示效果如下圖所示：
單行文字顯示效果如下圖所示：
具體實現方法，我是這樣來做的，代碼如下：
<div class="box">
<div class="wrap">
<p class="text">
我是單行標題我是單行標題我是單行標題我是單行標題
我是單行標題我是單行標題我是單行標題我是單行標題
我是單行標題我是單行標題我是單行標題我是單行標題我是單行標題我是單行標題我是單行標題我是單行標題
</p>
</div>
</div>
頁面結構由三個塊元素嵌套組成，最外層的box的css屬性要點在於display:table;overflow:hidden;子容器wrap的css屬性要點在於 vertical-align:middle;display:table-cell;
針對ie6的hack，wrap容器的 _position:absolute;_top:50%; 和text容器的 _position:relative; _top:-50%;
如果不需要水平居中的話，需要注釋掉wrap容器的text-align:center;_left:50%;以及text的display:inline-block;_left:-50%;
<style>
*{margin: 0;padding: 0;}
.box{width: 300px;height: 300px;display:table; overflow:hidden;background-color:#000; margin:0 auto; _position:relative;}
.wrap {vertical-align:middle; display:table-cell; text-align:center; _position:absolute; _top:50%; _left:50%;}
.text{color:#fff; border:1px solid #fff; display:inline-block; _position:relative; _top:-50%; _left:-50%;padding:0 20px;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
js代碼的話也就是做一下簡單的判斷就可以了，實現起來還是很簡單的
<script>
$(function(){
var text = $('.text');
if(parseInt(text.css('height')) > 40){
text.css('text-align','left');
}
})
</script>