div仿td標簽屬性

鏈接：https://pan.baidu.com/s/1kW1At9d 密碼：g0he

　　這裡說的div是指固定大小的，動態往裡面填充文字的時候，文字一直水平垂直居中（換行也是）。就和td標簽一樣。當然這個demo是針對文字的，如果有人問圖片和其他固定大小的盒模型怎麼辦- -我只能說回去好好學學基礎，用“絕對定位”和“相對定位”呀。

　　廢話不多說，demo在文章頂部，這裡寫一下代碼介紹，此方法實現純靠CSS：

<style>
.box{width:333px;height: 238px;display: table;}
.cont{vertical-align: middle;display: table-cell;}
h1{font-weight: inherit;font-size: 11px;text-align: center;} 
</style>
<div class="box">
    <div class="cont">
        <h1>一行字一行字一行字一行字</h1>
    </div>
</div>

　　以上代碼是簡潔型的代碼，具體效果還請下載demo查看。這個盒模型分為三層，最外層的box需要定義寬、高、和display：table。第二層的cont需要定義

vertical-align: middle;display: table-cell;text-align: center;模仿td屬性，三個標簽的意思分別是：垂直居中，讓標簽元素以表格單元格的形式呈現（IE8+），水平居中。
最裡面的h1標簽你就可以隨便定義啦，行高、顏色，字體大小。到這裡，你就能隨便往裡面動態生成數據啦，再也不用擔心換行或者顯示不下的問題了。