垂直居中方法檢測

一、使用table和tabel-cell屬性
html

<div class="wrapper">
    <div class="cell">
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh
    </div>
</div>

css

html,body{
    height: 100%;
}
.wrapper{
    display: table;
    height: 100%;
}
.cell{
    display: table-cell;
    vertical-align: middle;
}

注意：兼容到ie8,而且wrapper須要給一個高度。優勢：cell中的內容不用固定。

二、方法2
html

<div class="wrapper2">
    <div class="content">
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh
    </div>
</div>

css

.wrapper2{
    position: relative;
    height: 100%;
}
.wrapper2 .content{
    position: absolute;
    top: 50%;
    left: 0;
    height: 200px;
    overflow: auto;
    margin-top: -100px;
}

三、方法三
html

<div class="wrapper3">
    <div class="floater"></div>
    <div class="content">
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh
    </div>
</div>

css

.wrapper3{
    height: 100%;
}
.wrapper3 .floater{
    float: left;
    height: 50%;
    margin-bottom: -120px;
    border: 1px solid #00ff00;
}
.wrapper3 .content{
    clear: both;
    height: 240px;
    position: relative;
}

四、方法四
html

<div class="wrapper4">
    <div class="content">
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh<br />
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh
    </div>
</div>

css

.wrapper4{
    position: relative;
    height: 100%;
}
.wrapper4 .content{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 70%;
    height: 240px;
}

五、單行文本垂直居中
html

<div class="wrapper5">
        hdaishisdhidshidshidshsidhsdihdsihsdihdsisdh
</div>

css

.wrapper5{
    line-height: 100px;
}