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. CDQ分治 三维偏序

    这应该是一道CDQ分治的入门题目 我们知道,二维度的偏序问题直接通过,树状数组就可以实现了,但是三维如何实现呢? 我记得以前了解过一个小故事,应该就是分治的. 一个皇帝,想给部下分配任务,但是部下太多 ...

  2. DirectEvents用法

    DirectEvents异步执行服务器端事件 我们首先来看一下Ext.Net DirectEvents的一个最简单用法,通过点击按钮触发服务器端的事件处理方法,并在前台弹出一个提示框. <ext ...

  3. AtCoder Beginner Contest 075 C Bridge(割边)

    求割边个数.Tarjan的板子.. #include <bits/stdc++.h> using namespace std; const int MAXN = 55; const int ...

  4. ELMo解读（论文 + PyTorch源码）

    ELMo的概念也是很早就出了,应该是18年初的事情了.但我仍然是后知后觉,居然还是等BERT出来很久之后,才知道有这么个东西.这两天才仔细看了下论文和源码,在这里做一些记录,如果有不详实的地方,欢迎指 ...

  5. 2018年NOIP普及组复赛题解

    题目涉及算法: 标题统计:字符串入门题: 龙虎斗:数学题: 摆渡车:动态规划: 对称二叉树:搜索. 标题统计 题目链接:https://www.luogu.org/problem/P5015 这道题目 ...

  6. 通俗理解tf.name_scope()、tf.variable_scope()

    前言:最近做一个实验,遇到TensorFlow变量作用域问题,对tf.name_scope().tf.variable_scope()等进行了较为深刻的比较,记录相关笔记:tf.name_scope( ...

  7. 2018-2-13-WPF-DelegateCommand-出现Specified-cast-is-not-valid

    title author date CreateTime categories WPF DelegateCommand 出现Specified cast is not valid lindexi 20 ...

  8. [转]Java Web工程目录结构

    说明 介绍java web 工程的基本结构目录.记录java web 工程结构的学习. Java web 结构 java web严格来说分为两类工程结构:一个是工程编译目录结构,一个是工程发布目录结构 ...

  9. [转]VsCode搭建Java开发环境（Spring Boot项目创建、运行、调试）

    源码地址:https://github.com/YANGKANG01/Spring-Boot-Demo 安装扩展 安装如下两个主要扩展即可,这两个扩展已关联java项目开发主要使用的maven.spr ...

  10. Vue 列表动画实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...