1. 使用Flexbox布局

Flexbox是CSS的強大布局模型，它為我們提供了簡單而靈活的方法來實現(xiàn)元素的水平和垂直居中。

html復(fù)制代碼
<div class="container">
  <div class="centered-element">
    <!-- 內(nèi)容 -->
  </div>
</div>

css復(fù)制代碼
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 設(shè)置容器的寬高，如果需要 */
  width: 100vw;
  height: 100vh;
}
.centered-element {
  /* 元素樣式 */
}

上面的代碼中，我們使用了Flexbox布局模型，通過display: flex;將容器設(shè)置為彈性布局容器。justify-content: center;和align-items: center;分別使內(nèi)容在水平和垂直方向上居中。

2. 使用絕對定位和transform

另一種常用的方法是使用絕對定位和CSS的transform屬性來實現(xiàn)元素的居中。

html復(fù)制代碼
<div class="container">
  <div class="centered-element">
    <!-- 內(nèi)容 -->
  </div>
</div>

css復(fù)制代碼
.container {
  position: relative;
  /* 設(shè)置容器的寬高，如果需要 */
  width: 100vw;
  height: 100vh;
}
.centered-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 元素樣式 */
}

上面的代碼中，我們將容器設(shè)置為相對定位，并通過top: 50%;和left: 50%;將元素的左上角定位到了容器的中心。然后，通過transform: translate(-50%, -50%);將元素向左和向上移動自身寬高的一半，從而實現(xiàn)元素在水平和垂直方向上的居中。

3. 使用Grid布局

如果你在項目中已經(jīng)使用了CSS的Grid布局，那么也可以很容易地實現(xiàn)元素的水平和垂直居中。

html復(fù)制代碼
<div class="container">
  <div class="centered-element">
    <!-- 內(nèi)容 -->
  </div>
</div>

css復(fù)制代碼
.container {
  display: grid;
  place-items: center;
  /* 設(shè)置容器的寬高，如果需要 */
  width: 100vw;
  height: 100vh;
}
.centered-element {
  /* 元素樣式 */
}

在上面的代碼中，我們使用了Grid布局，通過display: grid;將容器設(shè)置為網(wǎng)格容器。然后，通過place-items: center;將內(nèi)容在網(wǎng)格容器中居中。

4. 使用text-align和line-height

如果你需要讓一個行內(nèi)元素水平垂直居中，你可以使用text-align: center;將內(nèi)容在水平方向上居中，然后使用line-height屬性設(shè)置和容器高度相等的行高來實現(xiàn)垂直居中。

html復(fù)制代碼
<div class="container">
  <span class="centered-text">居中文本</span>
</div>

css復(fù)制代碼
.container {
  /* 設(shè)置容器的寬高，如果需要 */
  width: 100vw;
  height: 100vh;
  text-align: center;
  line-height: 100vh;
}
.centered-text {
  /* 元素樣式 */
  display: inline-block;
  vertical-align: middle;
}

在上面的代碼中，我們將容器設(shè)置為文本居中，并設(shè)置行高和容器高度相等，從而實現(xiàn)行內(nèi)元素的垂直居中。同時，為了讓行內(nèi)元素居中，我們還使用了display: inline-block;和vertical-align: middle;。

5. 利用定位+margin:auto

父級設(shè)置為相對定位，子級絕對定位 ，并且四個定位屬性的值都設(shè)置了0，那么這時候如果子級沒有設(shè)置寬高，則會被拉開到和父級一樣寬高

<style>
    .father{
        width:500px;
        height:300px;
        border:1px solid #0a3b98;
        position: relative;
    }
    .son{
        width:100px;
        height:40px;
        background: #f0a238;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

這里子元素設(shè)置了寬高，所以寬高會按照我們的設(shè)置來顯示，但是實際上子級的虛擬占位已經(jīng)撐滿了整個父級，這時候再給它一個margin：auto它就可以上下左右都居中了

6. 利用定位+margin:負(fù)值

絕大多數(shù)情況下，設(shè)置父元素為相對定位， 子元素移動自身50%實現(xiàn)水平垂直居中

<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-50px;
        margin-top:-50px;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

• 初始位置為方塊1的位置
• 當(dāng)設(shè)置left、top為50%的時候，內(nèi)部子元素為方塊2的位置
• 設(shè)置margin為負(fù)數(shù)時，使內(nèi)部子元素到方塊3的位置，即中間位置

這種方案不要求父元素的高度，也就是即使父元素的高度變化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一樣的操作,但是該方案需要知道子元素自身的寬高，但是我們可以通過下面transform屬性進(jìn)行移動

總結(jié)

根據(jù)元素標(biāo)簽的性質(zhì)，可以分為：

• 內(nèi)聯(lián)元素居中布局
• 塊級元素居中布局

內(nèi)聯(lián)元素居中布局

水平居中

• 行內(nèi)元素可設(shè)置：text-align: center
• flex布局設(shè)置父元素：display: flex; justify-content: center

垂直居中

• 單行文本父元素確認(rèn)高度：height === line-height
• 多行文本父元素確認(rèn)高度：disaply: table-cell; vertical-align: middle

塊級元素居中布局

水平居中

• 定寬: margin: 0 auto
• 絕對定位+left:50%+margin:負(fù)自身一半

垂直居中

• position: absolute設(shè)置left、top、margin-left、margin-top(定高)
• display: table-cell
• transform: translate(x, y)
• flex(不定高，不定寬)
• grid(不定高，不定寬)，兼容性相對比較差

到此這篇關(guān)于CSS實現(xiàn)元素水平垂直居中的幾種方法的文章就介紹到這了,更多相關(guān)CSS元素水平垂直居中內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論