DIV元素水平和垂直居中
在前端开发过程中,经常要对元素进行居中设置。一般有水平居中,和垂直居中。一般设置水平居中简单。基本是margin:0 auto,就可以了。但是垂直居中,我们有时会觉得使用vertical-align,但是这个属性对div元素不起作用。
目前通用的解决办法是,使用绝对定位,然后设置left和top为50%。然后通过margin来设置。下面具体代码演示了一个简单的登录页面,然后使登录界面水平居中和垂直居中。代码如下:
<html>
<head>
<title>div元素水平和垂直居中</title>
<style type="text/css">
#login-container
{
width:400px;
height:350px;
background-color:#ddd;
text-align:center;
position:absolute;
left:50%;
top:50%;
margin:-200px 0 0 -200px;
}
#login-container .login-title
{
padding-top:50px;
}
</style>
</head>
<body>
<div id="login-container">
<h3 class="login-title">用户登录</h3>
<div>用户名:<input type="text" value=""/></div>
<div>密 码:<input type="text" value=""/></div>
</div>
</body>
</html>
.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }
截图如下:
使用Chrome、Firefox和IE9以上浏览器中,改变浏览器的大小,div元素还是会垂直居中。所有不需要额外写JavaScript代码进行定位。后续会写到另外一个问题:在一个div中,不固定高度的图片如何垂直居中。另外jQuery UI的Dialog控件有一个bug就是,页面太长了,往下拉滚动条时,overlay的高度不能自动延伸。这里需要写代码进行控制,在全局js文件中,添加下面代码:
//hotfix.修正overlay在窗口发生onresize时,不调整位置
function update_widget_overlay_height() {
var height = $(window).height() + $(window).scrollTop();
$(".ui-widget-overlay").css({ "height": height });
}
$(window).scroll(function () {
update_widget_overlay_height();
});
.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }
- position:sticky的兼容性尝试
- Python爬虫股票评论,snowNLP简单分析股民用户情绪
- Spring+SpringMVC+MyBatis+easyUI整合基础篇(十一)SVN服务器进阶
- node服务的监控预警系统架构
- Maven构建项目速度太慢的解决办法
- 分析函数之窗口子句(r4笔记第3天)
- node模块加载层级优化
- 使用ajax方法实现form表单的提交
- 翻译:如何使用CSS实现多行文本的省略号显示
- node中子进程同步输出
- Java开源博客My-Blog之docker容器组件化修改
- 几个行列转换的实用小例子(r4笔记第2天)
- History API与浏览器历史堆栈管理
- node中创建服务进程
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ffmpeg mp4解码管道输出的问题
- 机器人运动控制仿真:Matlab机器人工具箱和Simmechanics
- 使用HTMLTestRunner实现HTML测试报告
- Jmeter五步实现性能测试
- 测试工程师必须要掌握的linux命令
- Python之pip使用详解|附第三方库安装总结
- Python基础之数据类型详解
- 编码效率提升之Pycharm活动模板(Live Templates )
- crictl调试Kubernetes节点
- leetcode哈希表之好数对的数目
- Python处理excel的强大工具-openpyxl
- Pycharm最高效的快捷键集合
- 关于Python循环,看这一篇就够了
- Python新手常见错误汇总|附代码检查清单
- 入门快速安装ElasticSearch