技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

CSS:让内容(如div/table/图片等)显示在网页body中间

作者:admin    时间:2021-6-30 5:42:18    浏览:

本文介绍如何用CSS让内容(如div/table/图片等)显示在网页body中间。

在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 是一个简写属性 ,它允许你在相关的布局(如 GridFlexbox)中可以同时沿着块级和内联方向对齐元素 (例如:align-itemsjustify-items 属性) 。如果未提供第二个值,则第一个值作为第二个值的默认值。

3、height: 100vh; 这里有个vh的单位,vh就是当前屏幕可见高度的1%,也就是说 height:100vh == height:100%; 但是当元素没有内容时候,设置 height:100%,该元素不会被撑开,此时高度为0,但是设置 height:100vh,该元素会被撑开屏幕高度一致。

4、margin: 0; 设置对象上下间距为0

短短几行CSS代码,包含的知识量挺多的!

标签: css  css3  
  • IT热文
  • 站长推荐