<!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. haha

    [问题描述] 栈是一种强大的数据结构,它的一种特殊功能是对数组进行排序.例如,借助一个栈,依次将数组1,3,2按顺序入栈或出栈,可对其从大到小排序:1入栈:3入栈:3出栈:2入栈:2出:1出栈.在上面 ...

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

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

  3. Python3基础 双星号 求一个数的几次幂

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  4. BZOJ 1061 志愿者招募（最小费用最大流）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1061 题意:申奥成功后,布布经过不懈努力,终于 成为奥组委下属公司人力资源部门的主管.布 ...

  5. External Storage 数据存储

    一些数据存储的封装:http://hubingforever.blog.163.com/blog/static/17104057920129198236599/ External Storage数据存 ...

  6. img 图片高度设置为百分比无效的解答

    当用百分比作为宽高时  因为百分比是相对于其最近的父元素的宽高,所以首先其父元素要有宽高,宽度一般不设置会有默认值(比如整个屏幕的宽度),但是高度不设置就没有默认值,因此如果父元素没设高度值,而其内部 ...

  7. CUBRID学习笔记 45 REPLACE DELETE MERGE 教程

    c#,net,cubrid,教程,学习,笔记欢迎转载 ,转载时请保留作者信息.本文版权归本人所有,如有任何问题,请与我联系wang2650@sohu.com . 过错 ------ 官方文档是英文的, ...

  8. 关于HTML5与移动开发

    OSChina API列表: android api:http://tool.oschina.net/apidocs AppCan移动开发平台:http://doc.appcan.cn/#!/guid ...

  9. FLASH CC 2015 CANVAS 导出图片出现缩放问题

    最近有项目 没时间更新教程 刚才出现一个问题 就是导出动画后,发现有图片无故被缩放(与软件内的设置不一样) 经过排查 发现动画师 直接将位图 进行了缩放, 导出后出现问题 把文图转换为影片剪辑后,做缩 ...

  10. HDU5730 FFT+CDQ分治

    题意:dp[n] = ∑ ( dp[n-i]*a[i] )+a[n], ( 1 <= i < n) cdq分治. 计算出dp[l ~ mid]后,dp[l ~ mid]与a[1 ~ r-l ...