css中元素垂直居中的n種方法


元素垂直居中的n種方法

本文章收集了多種實現居中布局的方法,並且按照實現的時間線,從css2到css3的各種解決方案,從代碼量有少到多的排序來一一說明每種布局方法的實現方式,通過閱讀此文章能夠讓你解決平時的開發中遇到的各種布局問題。

使用line-height實現單行文本垂直居中

line-height:用於設置多行元素的空間量,如多行文本的間距。對於塊級元素,它指定元素行盒(line boxes)的最小高度。對於非替代的 inline 元素,它用於計算行盒(line box)的高度。

.box-1{
    height: 50px;
    line-height: 50px;
}
<div class="box box-1">
    這是要垂直居中的內容。
</div>

查看案例: https://codepen.io/qwguo88/full/dyYvBQv

使用inline-block元素和vertical-align特性實現垂直居中

此方法不限制元素的寬高,兼容性好

  1. vertical-align:用來指定行內元素(inline)或表格單元格(table-cell)元素的垂直對齊方式。
<div class="box">
    <div class="content">
        這是要垂直居中的內容。
    </div>
</div>
.box{
  text-align: center;
  letter-spacing: -.3em;
}
.box::before{
  content: '';
  height: 100%;
  width: 1px;
  margin-right: -1px;
  display:inline-block;
  vertical-align: middle;
}
.content{
  display:inline-block;
  vertical-align: middle;
  letter-spacing: normal;
}

查看案例: https://codepen.io/qwguo88/full/KKdmvdj

上面的案例通過利用display:inline-block的高度100%於父級高度,再利用vertical-aling:middle垂直居中屬性,讓行內塊級元素劇中與父級。在元素設置成行內塊級元素的時候代碼中如果元素后邊有空格,可以通過設置父級元素letter-spacing:-.3em,然后在通過居中元素還原文字間隔,或者通過設置父級的font-size:0;也可以取消空格的間距。其中紅色豎線是通過父元素的偽類設置的。

使用表格單元格和vertical-align特性實現垂直居中

<div class="box">
  <div class="content">
    這是要垂直居中的內容。
  </div>
</div>
.box{
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}
.content{
  display:inline-block;
}

此方法需要設置父級的父級為diaplay:table;,並且設置父元素:display:table-cell,然后在設置vertical-align:middle,實現元素居中,但是此方法子元素需要是行內元素,和行內塊級元素;

查看案例: https://codepen.io/qwguo88/full/qBOmPaM

使用絕對定位absolute和margin負值

此方法用於固定寬高的元素,或者通過js獲取不固定元素寬高

<div class="box">
  <div class="content">
    這是要垂直居中的內容。
  </div>
</div>
.box{
  position: relative;
}
.content{
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px;
}

此方法需要設置元素依照父級絕對定位,left和top都按照父元素50%定位。且需要知道要居中元素的寬高,也可以通過javascript獲取元素的寬高,並且設置margin的上和左為負值元素寬高的一半;

使用絕對定位absolute和margin:auto

此方法需要設置居中元素為固定寬高

<div class="box">
  <div class="content">
    這是要垂直居中的內容。
  </div>
</div>
.box{
  position: relative;
}
.content{
  position: absolute;
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

此方法利用margin: auto;居中特性加決定定位上下左右為0來實現元素居中,此方法需要固定元素的寬高,並且決對定位於父元素。兼容ie8以上瀏覽器.

使用絕對定位absolute和css3的transform:translate屬性

<div class="box">
  <div class="content">
    這是要垂直居中的內容。
  </div>
</div>
.box{
  position: relative;
}
.content{
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%, -50%);
}

此方法利用了css3的新特性元素偏移屬性,先讓元素絕對定位於父元素的右、上的50%,然后通過transform:translate(-50%, -50%);設置元素按照自身的右上便宜50%實現居中,此方法不用的優點:不用固定元素寬高,缺點:兼容需要支持css3的瀏覽器。

案例說明: https://codepen.io/qwguo88/full/jObmLaN

使用flex實現居中

通過flex彈性布局有好多種方式可以居中對齊,可以給父級單獨設置,或者父級子級結合設置實現

html代碼結構完全一樣:

<div class="box">
    <div class="content">
      這是要垂直居中的內容。
    </div>
</div>

方法1:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

最簡單的方法,只通過父級設置,把父元素設置成彈性很模型,然后設置父元素的子元素橫向縱向居中顯示。

方法2:

.box{
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

也是只通過父級設置,把父元素設置成彈性很模型,然后設置父元素的子元素橫向居中顯示,然后通過彈性很模型的子元素組align-content:center對齊方式,配合flex-wrap:wrap實現。

方法3:

.box{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.box:before{
    content: '';
    flex-grow: .5;
}

這個也只只給父級設置,不同的是這個需要借助父級的偽元素;先把父元素設置成彈性很模型,然后設置縱向排列,然后設置橫軸左右居中,然后再借助父元素偽類,設置縱向占據父元素的.5大小,實現上下居中。

方法4:

.box{
    display: flex;
}
.content{
    margin: auto;
}

把父元素設置成彈性很模型,然后通過要居中的子元素設置margin:auto,元素外間距依照父級自適應外間距。

方法5:

.box{
    display: flex;
    justify-content: center;
}
.content{
    align-self: content
}

把父元素設置成彈性很模型,然后子元素設置align-self: content。

查看案例: https://codepen.io/qwguo88/full/ZEbKgXG

使用grid網格布局實現居中

通過css的最新布局形式grid網格布局,也有多種方式,網格布局也可以給父級單獨設置,或者父級子級結合設置實現

html代碼結構完全一樣:

<div class="box">
    <div class="content">
      這是要垂直居中的內容。
    </div>
</div>

方法1:

.box{
    display: grid;
    place-content: center;
}

方法2:

.box{
    display: grid;
    place-items: center;
}

方法3:

.box{
    display: grid;
    justify-content: center;
    align-content: center;
}

方法4:

.box{
    display: grid;
    justify-content: center;
    align-items: center;
}

方法5:

.box{
    display: grid;
}
.content{
    margin: auto;
}

方法6:

.box{
    display: grid;
    justify-content: center;
}
.content{
    align-self: center;
}

查看案例: https://codepen.io/qwguo88/full/PoPmJbo

使用calc()計算函數實現

此方法需要固定高度

<div class="box">
    <div class="content">
      這是要垂直居中的內容。
    </div>
</div>
.content{
    margin: auto;
    position: relative;
    width: 300px;
    height: 100px;
    top: calc((100% - 100px)/ 2);
}

首先設置固定寬高,利用margin:auto左右居中,然后通過relative定位top通過calc()函數計算,使用父級的100% 減去元素自身高度然后除以2,也就是總高度減去元素高度計算后的一半值,如果元素設置了邊線和內邊距需要相應的減掉。

使用設置文字排布方向屬性writing-mode實現

<div class="box">
    <div class="box-inner">
        <div class="content">
          這是要垂直居中的內容。
        </div>
    </div>
</div>
.box{
    writing-mode: tb-lr;
    writing-mode: vertical-lr;
    text-align: center;
}
.box-inner{
    width: 100%;
    display: inline-block;
    writing-mode: lr;
    writing-mode: horizontal-tb;
}
.content{
    display: inline-block;
    text-align: left;
}

這個方法相對來說復雜一些,需要多加一個標簽,首先給最外層改變排布方向為垂直排布,然后設置垂直居中;然后在里邊一層再把排布方向設置回來,並且設置為行內塊級元素寬度100%;最后讓居中的元素設置成行內塊級元素,文字對齊設置成左對齊實現。

查看案例: https://codepen.io/qwguo88/full/GRpmMjV


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM