<!DOCTYPE html>

<html lang="en">

<head>

<title>Vertical Centering with Equal Top and Bottom Padding</title>

<meta charset="utf-8">

<meta name="description" content="" />

<style type="text/css">

#parent {

background: #ccc;

}

/* horizontal centering */

#parent {

width: 400px;

margin: 20px auto;

}

.child {

text-align: center;

background: #999;

color: #fff;

}

/* vertical centering */

#parent {

padding: 5% 0;

}

.child {

padding: 1% 0;

}

body {

margin: 0px auto;

background-color: beige;

}

</style>

</head>

<body>

<form>

<div id="parent">

<div class="child">用户&nbsp;<input type="text" /></div>

<div class="child">密码&nbsp;<input type="text" /></div>

<div class="child"></div>

<div class="child" style="background: #ccc;">

<input type="submit" value="登录" style="width:80px;" /></div>

</div>

</form>

<script type="text/javascript">

var p = document.getElementById("parent");

resize_fn = function (e) {

var zbody_height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);

var zdiv_height = Math.max(p.scrollHeight, p.clientHeight);

var ztop = (zbody_height - zdiv_height) / 2;

p.style.marginTop = ztop + "px";

};

//var w = document.getElementsByClassName("child");

var w = document.querySelectorAll(".child");

for (var i = 0; i < w.length;i++) {

var oi = w.item(i);

oi.style.background = "#ccc";

}

//p.style.background = "beige";

resize_fn();

document.body.onresize = resize_fn;

</script>

</body>

</html>

垂直居中，水平居中html例子的更多相关文章

  1. Aspose.Words操作Word.PDF,让图片和文本垂直居中,水平居中解决方案

    x 环境 { "Aspose.Words": {"Version":"18.x"} } 需求与难题 生成试卷的时候,如果数学题目中有特殊符号 ...

  2. [css]实现垂直居中水平居中的几种方式

    转自博客 http://blog.csdn.net/freshlover/article/details/11579669 居中方式: 一.容器内(Within Container) 内容块的父容器设 ...

  3. 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

    Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中--实际上,实现垂直居中仅需要声明元素 ...

  4. [转] 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

    转自:http://blog.csdn.net/freshlover/article/details/11579669 Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用marg ...

  5. CSS3实现 垂直居中 水平居中 的技巧

    1 1 1 How To Center Anything With CSS Front End posted by Code My Views 1 Recently, we took a dive i ...

  6. 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width

    一: 效果: 1) 黑色 部分是 相框. 2) 图片 要实现 水平居中, 垂直居中 3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...

  7. CSS3实现DIV垂直居中+水平居中的四种方法

    <div class="div1"> <div class="div2"></div> </div> html结 ...

  8. div垂直居中水平居中css

    width: 860px; height: 500px; position: absolute; margin-left: -430px; margin-top: -250px; top: 50%; ...

  9. div水平居中和垂直居中

    水平居中和垂直居中 水平居中包含两种情况:        块级元素的水平居中:margin:0px auto;        文字内容的水平居中:text-align: center;        ...

随机推荐

  1. 【Thread】多线程的异常处理？

    线程中处理异常是个头疼的问题,在异步的代码中,如何将异常捕获. 捕获异常后,将异常反馈给开发者,或用户.一般来说,反馈给开发者,多数方式在是日志中打印异常日志:而反馈给用户,多数是在界面上友好提示(比 ...

  2. debian hosts文件中的 127.0.1.1 主机地址

    有时候/etc/hosts文件会看到127.0.1.1这个地址,这是什么呢? 127.0.0.1这个loopback地址很常见,就是本地接口的回路/回环地址.但有时候/etc/hosts文件中还会出现 ...

  3. SQL Server小技巧【1】

    1.SQL防止修改数据时引起多用户并发,当一条数据被一个用户锁定的时候其他用户将无法修改,除非将其释放. UPDATE TABLENAME WITH(ROWLOCK) SET 字段='Value' W ...

  4. hdu 1874（Dijkstra + Floyd）

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=1874 畅通工程续 Time Limit: 3000/1000 MS (Java/Others)    Me ...

  5. hdu 1086（计算几何入门题——计算线段交点个数）

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=1086 You can Solve a Geometry Problem too Time Limit: 2 ...

  6. Codeforces Round #382 (Div. 2) C. Tennis Championship 斐波那契

    C. Tennis Championship time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  7. hdu 4217 Data Structure? 树状数组求第K小

    Data Structure? Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  8. 关于Android构建

    “IDE都是给小白程序员的,大牛级别的程序员一定是命令行控,终端控,你看大牛都是使用vim,emacs 就一切搞定” 这话说的虽然有些绝对,但是也不无道理,做开发这行要想效率高,自动化还真是缺少不了命 ...

  9. 搭建SSH入过的那些坑

    1.添加完相关jar包,写完配置文件,写完测试类,运行提示 WARN:Establishing SSL connection without server's identity verificatio ...

  10. 解耦HTML、CSS和JavaScript

    当前在互联网上,任何一个稍微复杂的网站或者应用程序都会包含许多HTML.CSS和JavaScript.随着互联网运用的发展以及我们对它的依赖性日益增加,设定一个关于组织和维护你的前端代码的计划是绝对需 ...