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

在body中間顯示內容

demodownload

CSS

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

代碼解釋

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

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

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

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

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

標簽: css  css3