块级元素文字垂直居中

问题描述

1.块级元素文字垂直居中

解决：

（1）使用line-height样式

只适用于内容为单行文本、且元素高度已经指定的情况下。（也是我所使用的方法）

<style>
    div {
        width: 300px;
        height: 200px;
        background: lightgray;
        line-height: 200px;  /* line-height值与元素高度值保持一致 */
    }
</style>
<div>这段文字将垂直居中</div>

（2）使用padding样式

仅限于元素高度不确定的情况下，如果指定了元素高度，这种方法就不适用了。

<style>
    div {
        width: 300px;
        background: lightgray;
        padding: 30px;
    }
<style>
<div>这段文字将垂直居中</div>

（3）使用display将元素模拟为表格

这种方法嵌套了一个新的div，将div.outer显示为表格，div.inner显示为单元格，而单元格具有valign属性，因此vertical-align可对其产生作用。比第二种方法优秀的是，这种方法也适用于指定了高度的元素。此方法缺点是不支持IE6。

<style>
    div.outer {
        width: 300px;
        height: 200px;
        background: lightgray;
        display: table;
    }
    div.inner {
        display: table-cell;
        vertical-align: middle;
    }
</style>
<div class="outer">
    <div class="inner">这段文字将垂直居中，无论这段文字是多行还是单行，他都能完美的显示在块级元素中间。</div>
</div>

---