<!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. iis 500 解决方法

    1 打开运行,输入cmd进入到命令提示符窗口. 2 进入到C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727 目录. 3 输入aspnet_regiis.exe ...

  2. 被指定为此窗体的 MdiParent 的窗体不是 MdiContainer。 参数名: value

    解决方案 添加this.IsMdiContainer  = true; 或者下面的方法

  3. shell与kernel的理解 转载

    Shell 的英文释义是外壳,与 kernel 内核名词遥相呼应,一外一内,一壳一核.内核就像瑞士银行的金库,存放着客户的黄金等众多的(硬件)资产,闲杂人等(包括客户)当然是严格禁止入内的,而作为客户 ...

  4. 第五课 SharedPrefereneces

    SharedPreferences总结: 一.SharedPreferences特点 1.本质是基于xml文件储存key-value对数据: 2.SharedPreferences对象本身只能获取数据 ...

  5. 表头表侧边固定，方法二，丫的，复制td

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. Trigger Execution Sequence Of Oracle Forms

    Sequence of triggers fires on Commit.1.  KEY Commit2.  Pre Commit3.  Pre/On/Post Delete4.  Pre/On/Po ...

  7. json和jsonp的传输方式

    jsonp传输会解决跨域的问题 $.ajax({ async: false, /* url: "http://127.0.0.1:8080/2015020601/background/mea ...

  8. [Effective Java]第九章 异常

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  9. CoreLocation

    导入框架(Xcode5.0之后可以省略)

  10. Java Base64加密、解密原理Java代码

    Java Base64加密.解密原理Java代码 转自:http://blog.csdn.net/songylwq/article/details/7578905 Base64是什么: Base64是 ...