卡卡網(wǎng)

本文介紹如何用CSS讓內(nèi)容(如div/table/圖片等)顯示在網(wǎng)頁(yè)body中間。

在body中間顯示內(nèi)容

demodownload

CSS

body {
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
  background-color: #fff;
}

代碼解釋

1、display: grid;是CSS3中的網(wǎng)格布局。它將網(wǎng)頁(yè)劃分成一個(gè)個(gè)網(wǎng)格，可以任意組合不同的網(wǎng)格，做出各種各樣的布局。它有很多屬性，在網(wǎng)頁(yè)布局上的功能非常強(qiáng)大。

2、place-items: center; CSS 中的 place-items 是一個(gè)簡(jiǎn)寫屬性 ，它允許你在相關(guān)的布局（如 Grid 或 Flexbox）中可以同時(shí)沿著塊級(jí)和內(nèi)聯(lián)方向?qū)R元素 (例如：align-items 和 justify-items 屬性) 。如果未提供第二個(gè)值，則第一個(gè)值作為第二個(gè)值的默認(rèn)值。

3、height: 100vh; 這里有個(gè)vh的單位，vh就是當(dāng)前屏幕可見高度的1%，也就是說(shuō) height:100vh == height:100%; 但是當(dāng)元素沒有內(nèi)容時(shí)候，設(shè)置 height:100%，該元素不會(huì)被撐開，此時(shí)高度為0，但是設(shè)置 height:100vh，該元素會(huì)被撐開屏幕高度一致。

4、margin: 0; 設(shè)置對(duì)象上下間距為0。

短短幾行CSS代碼，包含的知識(shí)量挺多的！

標(biāo)簽: css  css3