元素垂直居中

阿新 • • 發佈：2020-08-03

flex方法

html

<div class="parent">
    <div class="child">hello world</div>
</div>

style
- 給父元素新增 flex 屬性
- 設定主軸(預設橫向)子元素居中的排列方式 justify-content: center;
- 設定側軸(預設縱向)子元素居中的排列方式 align-items: center;

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    width:500px;
    height:500px;
    background: rgb(33, 46, 228);
}
.parent .child {
    color:#fff;
}

缺點
- 垂直居中是相對於父元素的寬高情況下進行居中
- 瀏覽器相容性比較差，只能相容到ie9及以上；

2D transform方法

html

<div class="parent">
    <div class="child">hello world</div>
</div>

style
- 父元素設定為 relateve
- 子元素設定為 absolute
- 子元素相對於父元素進行上左各50%的偏移
- 子元素的偏移是子元素頂部和左側相對於父元素的偏移，需要用 translate 按照元素自身寬度上和左移動
- PS : 除了 translate 以外，還可以使用margin設定負值的方式，但是需要對元素的大小進行計算

.parent{
    position: relative;
}
.parent .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color:rgb(33, 46, 228);
}

優點
- 實現的是相對於當前螢幕的居中，並且不受其他元素影響
缺點
- 脫離了文件流

table方法

html

<div class="parent">
    <div class="child">hello world</div>
</div>

style
- 將父元素設定為 table
- 將子元素設定為 table-cell
- 設定子元素垂直居中 vertical-align: middle;
- 設定子元素橫向居中 text-align: center;

.parent{
    display: table;
    height:500px;
    width: 500px;
    background-color: rgb(33, 46, 228)
}
.parent .child {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

優點
- 父元素（parent）可以動態的改變高度（table元素的特性）
缺點
- IE8以下不支援

inline-block方式

html

<div class="parent">
    <!-- <span></span> -->
    <div class="child">hello world</div>
</div>

style
- 父級設定水平居中 text-align: center;
- 子級設定 display: inline-block; 和 vertical-align: middle;
- 子級的需要一個兄弟也為 inline-block，設定 vertical-align，基準線為中間，並且讓他高度 height: 100%; ，實現垂直居中。
  - 一種方案是新增標籤
  - 另一種方案是通過偽元素 ::after 或 ::before

.parent{
    height:300px;
    width: 300px;
    text-align: center;
    background: rgb(33, 46, 228);
}
/* 也可以給 */
.parent::before{
    content: "";
    display: inline-block;;
    height: 100%;
    vertical-align: middle;
    /* inline-block的兼容表達*/
    zoom: 1;/*BFC*/
    *display: inline;
}
.parent .child{
    display: inline-block;
    color: #fff;
    vertical-align: middle;
    /* inline-block的兼容表達*/
    zoom: 1;/*BFC*/
    *display: inline;
}