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. Android教程 -08 ToolBar的使用和主题的介绍

    ActionBar 简介 视频为本篇播客知识点讲解,建议采用超清模式观看, 欢迎点击订阅我的优酷 讲解ToolBar之前首先需要了解 ActionBar, 两者使用起来基本上一致. Android 3 ...

  2. hdu 4114 Disney's FastPass（最短路+状态压缩）

    Disney's FastPass Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  3. supersockets支持热更新的服务器实例配置选项

    SuperSocket 支持以下配置选项的热更新: * logCommand * idleSessionTimeOut * maxRequestLength * logBasicSessionActi ...

  4. Python--day65--模板语言之tags

    Tags for循环 普通for循环 <ul> {% for user in user_list %} <li>{{ user.name }}</li> {% en ...

  5. Redux 认识之后进阶

    两个东西 action  状态 路由 以及嵌套路由 完整结构   进阶+源代码 源代码在我的 gitHub  存储库里面  https://github.com/Haisenan/Redux2.0

  6. 深度学习——CNN

    整理自: https://blog.csdn.net/woaidapaopao/article/details/77806273?locationnum=9&fps=1 思想 filter尺寸 ...

  7. ZR979B. 【十联测 Day 9】唯一睿酱

    ZR979B. [十联测 Day 9]唯一睿酱 题目大意: 给定一个数组\(r_i\),表明对于第\(i\)个数来说,他是\([max(1,i - r_i),min(n,i+r_i)]\)中最大的,求 ...

  8. H3C开启telnet服务

    [H3C]Telnet server enable       //开启telnet服务

  9. Cannot destructure property `createHash` of 'undefined' or 'null'(next服务端渲染引入next-less错误).

    next中引入@zeit/next-less因next版本过低(webpack4之前的版本)无法执行next-less内置的mini-css-extract-plugin mini-css-extra ...

  10. Vijos1917 艾酱最喜欢的数字 [求绝对众数]

    1.题意:第一行一个数字N,表示一共有多少个数字,第二行N个数字,保证其中至少有一个数字出现次数超过一半,任务是求出这个出现最多的数. 2.分析:本题是明显的求众数的问题,常规思路为开一个大数组,在读 ...