卡卡网

本文介绍如何用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