垂直居中實現方式總結

在網頁製做過程當中，咱們常常要用到圖片、文字的垂直居中。今天總結一下垂直居中的方法。

方法一 利用 line-height 實現垂直居中

#example1 {
    height: 100px;
    line-height: 100px;
    background: #161616;
    color: #fff;
    width: 200px;
}

<div id="example1">
    單行文字垂直居中
</div>

這種方法適用於單行文本垂直居中,若是文本內容太長，出現了換行，換行後的內容會溢出。

方法二 利用 display: table 實現垂直居中

#example2 {
    height: 100px;
    background: #161616;
    color: #fff;
    width: 400px;
    overflow: hidden;
    display: table;
}
#example2 .inner{
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    background:#999;
}

<div id="example2">
    <div class="inner">塊區域垂直居中</div>
</div>

方法三 margin 填充

#example3 {
    height: 100px;
    background: #161616;
    color: #fff;
    width: 400px;
    overflow: hidden;
}
#example3 .inner{
    margin-left: auto;
    margin-right: auto;
    margin-top: calc((100px - 50px)/2);
    height: 50px;
    background:#999;
}

<div id="example3">
    <div class="inner">塊區域垂直居中</div>
</div>

這種方法須要知道內外容器的大小

方法四 經典 absolute 佈局上下文垂直居中

#example4 {
    width: 400px;
    height: 100px;
    background: #161616;
    color: #fff;
    position: relative;
}
#example4 .inner{
    height: 50px;
    width: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -100px;
    background:#999;
}

<div id="example4">
    <div class="inner">塊區域垂直居中</div>
</div>

這種方法內部容器的寬高，外部容器的寬高能夠不定

方法五 Css3下 absolute 佈局上下文垂直居中

#example5 {
    width: 400px;
    height: 100px;
    background: #161616;
    color: #fff;
    position: relative;
}
#example5 .inner{
    position: absolute;
    left: 50%;
    top: 50%;
    background: #999;
    transform: translateX(-50%) translateY(-50%);
}

<div id="example5">
    <div class="inner">塊區域垂直居中</div>
</div>

這種方法內外容器均可以是不定的

方法六 利用margin：auto 居中

#expample6 {
    width: 400px;
    height: 100px;
    background: #eee;
    position: relative;
}

#expample6 .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 50px;
    width: 70%;
    background: #aaa;
    color:#222;
}

<div id="expample6">
    <div class="inner">Content here</div>
</div>

方法七 利用 Flex佈局 居中

#expample7 {
    width: 400px;
    height: 100px;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

#expample7 .inner {
    height: 50px;
    width: 70%;
    background: #aaa;
    color:#222;
}

<div id="expample7">
    <div class="inner">Content here</div>
</div>