css 元素居中

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

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

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

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

.container {
  text-align: center;
}

2、塊級(jí)元素水平居中

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

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

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

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

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

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


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

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

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

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


    我是標(biāo)題
    我是內(nèi)容

（2）解析：
使用絕對(duì)定位 position: absolute，讓dialog起點(diǎn)偏移到頁(yè)面的中央

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

（3）塊級(jí)元素的寬高不固定，就不能用負(fù)margin了（margin使用百分比是相對(duì)于父元素的寬度）。我們可以用css3的一個(gè)transform的屬性，transform是相對(duì)自身的寬高來(lái)做偏移的。

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

原理：

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

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

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

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

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

3、使用偽元素是為了減少標(biāo)簽

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

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

代碼：demo
結(jié)果：

5、display: flex實(shí)現(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: "