卡卡網(wǎng)

本文介紹如何用CSS讓內(nèi)容(如div/table/圖片等)顯示在網(wǎng)頁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)頁劃分成一個個網(wǎng)格，可以任意組合不同的網(wǎng)格，做出各種各樣的布局。它有很多屬性，在網(wǎng)頁布局上的功能非常強(qiáng)大。

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

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

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

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

標(biāo)簽: css  css3