css 元素居中

AZmake 發(fā)布于2019-08-29 17:16 / 702人閱讀

摘要：一水平居中行內(nèi)元素水平居中在父元素上設(shè)置使文字圖片水平居中。結(jié)果如圖塊級元素的寬高不固定，就不能用負了使用百分比是相對于父元素的寬度。代碼結(jié)果實現(xiàn)代碼設(shè)置寬高以顯示居中效果彈性布局垂直居中水平居中

一：水平居中 1、行內(nèi)元素水平居中

在父元素上設(shè)置 text-align: center 使文字/圖片水平居中。

.container {
  text-align: center;
}

2、塊級元素水平居中

先給塊級元素設(shè)置寬度（不設(shè)置寬度，塊級元素自己占據(jù)一整行，何談居中）

再給塊級元素設(shè)置margin：0 auto;（當(dāng)上下margin不一定是0，可以按照需求來設(shè)置）

.container {
  width: 200px;
  margin:  0 auto;
}

二、垂直居中 1、塊級元素內(nèi)部垂直居中

原理：設(shè)置塊級元素上下padding相等

前提：沒有設(shè)置高度，高度由內(nèi)容撐開。塊級元素如果設(shè)置了高度，就不知道如何設(shè)置padding的數(shù)值
demo


 
    好好學(xué)習(xí)
    天天向上

執(zhí)行結(jié)果

2、絕對定位實現(xiàn)垂直居中

（1）demo，
使用前提是塊級元素的寬高固定


    我是標題
    我是內(nèi)容

（2）解析：
使用絕對定位 position: absolute，讓dialog起點偏移到頁面的中央

通過負margin，偏移dialog寬高的一半，讓dialog處于正中。不用relative的原因是已經(jīng)用了絕對定位了，所以只好用負margin。結(jié)果如圖

（3）塊級元素的寬高不固定，就不能用負margin了（margin使用百分比是相對于父元素的寬度）。我們可以用css3的一個transform的屬性，transform是相對自身的寬高來做偏移的。

3、vertical-align實現(xiàn)水平垂直居中

原理：

通過text-align:center 實現(xiàn)水平居中

通過偽元素設(shè)置一個內(nèi)容為空的元素，設(shè)置高度為100%，通過vertical-align實現(xiàn)基線對齊。

使用環(huán)境：塊級元素中設(shè)置行內(nèi)元素水平垂直居中
代碼：demo
結(jié)果：

遇坑：1、當(dāng)然使用絕對定位也可以實現(xiàn)這個效果

2、偽元素設(shè)置display：block是有問題，需要設(shè)置為inline-block

3、使用偽元素是為了減少標簽

4、table-cell實現(xiàn)居中

原理：把box設(shè)置為表格元素（display: table-cell），通過vertical-align: middle對里面的元素做垂直居中
缺點：把box設(shè)置為display: table-cell，box不再是塊級元素，如果不設(shè)置寬度就會收縮。

代碼：demo
結(jié)果：

5、display: flex實現(xiàn)

代碼：demo


  

.space {
  width: 100vw;
  height: 100vh;  /* 設(shè)置寬高以顯示居中效果 */
  display: flex;  /* 彈性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
}

body {
  margin: 0;
  background: rgba(0, 0, 0, .95);
}

.earth::after {
  content: "