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查同个实例两个数据库中的表名差异

    select TABLE_NAME from ( select TABLE_NAME ,) as cnt from information_schema.tables where TABLE_SCHE ...

  2. idea各种中文显示乱码解决大全

    本文链接:https://blog.csdn.net/liqimo1799/article/details/81811153中文乱码问题分类: 编码普通中文乱码properties文件中文乱码cons ...

  3. H3C 帧中继配置示例

  4. Eclipse设置默认编码为UTF-8

    需要设置的几处地方为: Window->Preferences->General ->Content Type->Text->JSP 最下面设置为UTF-8 Window ...

  5. 判断当前所使用python的版本和来源

    import sys print(sys.prefix) print(sys.executable) 怎样判断当前py文件在什么版本的python环境下运行 import sys print(sys. ...

  6. python编程之进程

    进程:运行中的程序 进程和操作系统的关系:进程是操作系统调度和资源分配的最小单位,是操作系统的结构基础. 那么为什么要有进程呢? 程序在运行时,会使用各种硬件资源,如果他们之间没有界限,那么程序之间的 ...

  7. Python--day42--MySQL外键定义及创建

    什么是外键? 外键的创建:constraint 外键名 foregin key ("表1值1",“ 表1值2”) references 表2的名字(“值1”)

  8. 如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法

    如何解决vue项目中 scss 不支持 scoped 的 /deep/ 穿透写法 用过vue的人估计都用过scoped样式属性,但有时候需要穿透样式,啥办? 很多资料都说用>>> 或 ...

  9. H3C IP地址动态获取过程

  10. 备战省赛组队训练赛第十六场(UPC)

    传送门 题解: by 烟台大学 (提取码:8972)