1: 应用场景 在body中书写一个代码块, 使其相对于body垂直居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>js定时器setTimeout_setInterval的用法</title>

    <style type="text/css">

    	body{

    		position: relative;

    		margin: 0;

    		padding: 0;

    		width: 100vw;

    		height: 100vh;

    	}

    	#clock{

    		width: 300px;

    		height: 100px;

    		margin: auto;

    		position: absolute;

    		top: 0; bottom: 0;

    		left: 0; right: 0;

    		background: cyan;

    	}

    </style>

</head>

<body>

	<!-- 需求: 利用setInterval定时器写一个走动的时钟 -->

	<div id="clock">

		111

	</div>

    <script>

    	window.onload = function(){

    	}

    </script>

</body>

</html>

2: 这样就OK啦 !

01_垂直居中body中的应用的更多相关文章

  1. CSS中有关水平居中和垂直居中的解决办法

    CCS中让div等块级元素在父级元素中居中的方法: (1)div{  margin:0 auto   } 该方法只能实现水平的居中,无法实现元素的垂直居中 (2)当div元素的宽高是固定的,然后设置位 ...

  2. CSS从大图中抠取小图完整教程(background-position应用)

    CSS从大图中抠取小图完整教程(background-position应用)  转自: http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111 ...

  3. CSS从大图中抠取小图完整教程(background-position应用) (转)

    自认为把background-position的应用讲得非常通俗易懂的教材.做个记号. 相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象:网页中很多图片素材被合成在一张图片上. 起初小菜模仿网站的 ...

  4. 【翻译】CSS水平和垂直居中的12种方法

    英语原文链接 在CSS中有许多不同的方法能够做到水平和垂直居中,但很难去选择合适的那个.我会向你展示我所看到的所有的方法,帮助你在所面对的情境下选择最棒的那一个. 方法1 此方法将只能垂直居中单行文本 ...

  5. android textview字体加粗 Android studio最新水平居中和垂直居中

    android textview字体加粗 Android studio最新水平居中和垂直居中 Android中字体加粗在xml文件中使用android:textStyle=”bold”但是不能将中文设 ...

  6. [spring]03_装配Bean

    3.1 JavaBean 3.1.1 JavaBean 是什么 JavaBean 是一种JAVA语言写成的可重用组件. 为写成JavaBean,类必须是具体的和公共的,并且具有无参数的构造器. Jav ...

  7. Web 前端之HTML和CSS

    Web 前端之HTML和CSS HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签 ...

  8. CSS大美集

    细节1……………………………………………………………………………… 一.当文字与图片在一行,需要将文字与图片底对齐,可以这样写: <div>记住密码<img src="im ...

  9. 我所了解的CSS

    我真的了解css吗? 我这样问自己. 我的思考和这几天的学习来自于看了寒冬winter大神的这篇blog:谈谈面试与面试题 .说实话, 我边看,脑袋里面边翻篇一样的过着我的那点css知识,看完了,整个 ...

随机推荐

  1. mysql数据库之表和库

    SQL:语句主要用于存储数据,查询数据,更新数据和管理关系数据库系统SQL语言有IBM开发,sql语言分为中类型: 1.DDL语句 数据库定义语句:数据库,表,视图,索引,存储过程,例如create, ...

  2. APICloud修改最低操作系统版本要求

    在APICloud中的云编译选项中: 点击高级设置,就可以修改对应的操作系统版本要求:

  3. 嵌套app ，的h5分支 项目 （分享，保存图片，返回app）

    function callAppBridge(func, argObj) {   const app = window.webkit || window.app;   const args = typ ...

  4. python深浅copy和赋值

    Python直接赋值,浅copy和深copy的比较 基于引用和对象(python引用和对象分离) 总结: 直接赋值:a = b -->a,b两个引用指向相同的对象 浅copy:a为b的copy ...

  5. HTML--表格与表单

    一.表格 <table></table>表格 width:宽度.可以用像素或百分比表示. 常用960像素. border:边框,常用值为0. cellpadding:内容跟边框 ...

  6. 在 CentOS 7.3 上安装 nginx 服务为例，说明在 Linux 实例中如何检查 TCP 80 端口是否正常工作

    CentOS 7.3 这部分以在 CentOS 7.3 上安装 nginx 服务为例,说明在 Linux 实例中如何检查 TCP 80 端口是否正常工作. 登录 ECS 管理控制台,确认实例所在安全组 ...

  7. 《Spring 5官方文档》 Spring AOP的经典用法

    原文链接 在本附录中,我们会讨论一些初级的Spring AOP接口,以及在Spring 1.2应用中所使用的AOP支持. 对于新的应用,我们推荐使用 Spring AOP 2.0来支持,在AOP章节有 ...

  8. linux预备知识

    我们正在接近去看一些实际的模块代码. 但是首先, 我们需要看一些需要出现在你的模块 源码文件中的东西. 内核是一个独特的环境, 它将它的要求强加于要和它接口的代码上. 大部分内核代码包含了许多数量的头 ...

  9. thinkjs解决跨域

    this.header("Access-Control-Allow-Origin", "*"); 将上面的代码在请求发送之前执行即可 如果不知道放在哪里 可以参 ...

  10. js的cookie操作及知识点详解

    <html> <head> <script type="text/javascript"> function getCookie(c_name) ...