如何垂直居中一個元素

垂直居中一個元素的方法：1、透過「line-height」屬性對單行內聯元素實現垂直居中；2、利用flex佈局實現垂直居中；3、使用「absolute 負margin」實現塊級元素垂直居中。

垂直居中

#1.單行內聯元素垂直居中

<div id="box">
     <span>单行内联元素垂直居中。</span>。
</div>
<style>
 #box {
    height: 120px;
    line-height: 120px;
    border: 2px dashed #f69c55;
    }
</style>

2.多行內嵌元素垂直居中

①利用flex佈局（flex）

#利用flex佈局實現垂直居中，其中flex-direction: column定義主軸方向為縱向。這種方式在較舊的瀏覽器有相容性問題。

<div class="parent">
    <p>Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.    
    Dance like nobody is watching, code like everybody is.</p>
</div>
<style>
    .parent { 
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 2px dashed #f69c55;
    }
</style>

②利用表格佈局（table）

使用表格佈局的vertical-align: middle可以實現子元素的垂直居中

<div class="parent">
    <p class="child">The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.</p>
</div>
 <style>
    .parent {
        display: table;
        height: 140px;
        border: 2px dashed #f69c55;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
    }
</style>

3 區塊級元素垂直居中

①使用absolute 負margin(已知高度寬度)

透過絕對定位元素距離頂部50%，並設定margin-top向上偏移元素高度的一半，就可以實現了。

<div class="parent">
    <div class="child">固定高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

②使用absolute transform

當垂直居中的元素的高度和寬度未知時，可以藉助CSS3中的transform屬性向Y軸反向偏移50%的方法實現垂直居中。但是部分瀏覽器有相容性的問題。

<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

③使用flex align-items

透過設定flex佈局中的屬性align-items，使子元素垂直居中。

<div class="parent">
    <div class="child">未知高度的块级元素垂直居中。</div>
</div>
.parent {
    display:flex;
    align-items:center;
}

④使用table-cell vertical-align

透過將父元素轉換為表格儲存格顯示（類似 和），再透過設定vertical- align屬性，使表格儲存格內容垂直居中。

<div class="parent">
  <div class="child">Demo</div>
</div>
<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>

推薦學習：《前端影片》

以上是如何垂直居中一個元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！