如何让div上下左右都居中
在做登陆页面的话，需要login的div 上下左右都居中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" >
<head>
<title>居中Demo</title>
</head> <mce:style type="text/css" title="currentStyle" media="screen">
<!--
#divcenter{
position:absolute;/*层漂浮*/
top:50%;
left:50%;
width:300px;
height:300px;
margin-top:-150px;/*注意这里必须是DIV高度的一半*/
margin-left:-150px;/*这里是DIV宽度的一半*/
background:yellow;
border:1px solid red;
}
-->
</mce:style>
<style type="text/css" title="currentStyle" media="screen" mce_bogus="1">
#divcenter{
position:absolute;/*层漂浮*/
top:50%;
left:50%;
width:300px;
height:300px;
margin-top:-150px;/*注意这里必须是DIV高度的一半*/
margin-left:-150px;/*这里是DIV宽度的一半*/
background:yellow;
border:1px solid red;
}
</style>
</head>
<body>
<div id="divcenter">
this is a test
</div>
</body>
</html>
参考地址：http://blog.csdn.net/carlfan/article/details/4579590参考地址：
如何让div上下左右都居中的更多相关文章
- css+div上下左右自适应居中
主要记录自己日常积累的布局相关的东西,持续更新中. 1.登录框上下左右自适应居中 以前想要把登录表单始终放置在页面的中间,花了不少心思,一直以来用的解决方法都是用js,感觉有点麻烦不是很好,于是在网上 ...
- html 上下左右都居中
给要居中的图片或者链接所在的div 设置例如以下属性 width: px; height: wd=px&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqI ...
- 小div在大div里面水平垂直都居中的实现方法
关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...
- 绝对定位上下左右都为0 margin为auto为什么能居中
老规矩,先来一段废话,我大学刚入门的时候觉得CSS很简单,记一记就会了,不就是盒模型嘛,现在想来觉得自己那时候真的很自以为是哈哈.但是随着工作沉淀,我明白了任何技术都有着它的深度和广度,正是因为不少人 ...
- 用CSS让DIV上下左右居中的方法
转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...
- 使图片相对于上层DIV始终水平、垂直都居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何让图片相对于上层DIV始终保持水平、垂直都居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何将一个div盒子水平垂直都居中？
html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...
- css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）
css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...
随机推荐
- java技术用ssh从linux服务器下载数据
通常需要从linux服务器获取数据文件,而通常能有的访问方式只有ssh,所以就可以用ssh进行数据下载. java连接远程主机的方式有多种,这里和大家分享的是通过ssh方式连接远程主机,使用的是jsc ...
- java数组初始化
java数组初始化 //静态初始化数组:方法一 String cats[] = new String[] { "Tom","Sam","Mimi&qu ...
- IOS中用UIStoryBoard类初始化/跳转控制器
1.空工程中通过创建storyboard文件加载页面 //获取Main.storyboardUIStoryboard *mainStory = [UIStoryboard storyboardWi ...
- sqlite加密
一直使用sqlite来管理本地的数据,但是Xcode中的SDK中集成的sqlite是免费的,不提供加密模块,但是程序中用到的很多数据,有时候是不想让别人看到,一开始虑修改sqlite的源码,自己重新编 ...
- 教你ECSHOP去版权与标志（新增272版)
前台部分: 1:去掉头部TITLE部分的ECSHOP演示站 Powered by ecshop 前者在后台商店设置 - 商店标题修改 后者打开includes/lib_main.php $page_t ...
- Http Basic认证
Http Basic认证就是访问的时候把用户名和密码用base64加密放在request的header的authorization中 服务端直接获取authorization,解析,跟用户名匹配即可. ...
- HDU 4712：Hamming Distance
Hamming Distance Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others) ...
- YTU 2974: C语言习题5.26--文件操作3
2974: C语言习题5.26--文件操作3 时间限制: 1 Sec 内存限制: 128 MB 提交: 213 解决: 92 题目描述 文本文件score.dic 中存储了n名学生的信息(班级编号 ...
- Inviting Friends(二分+背包)
Inviting Friends Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) To ...
- 周赛-Expression 分类： 比赛 2015-08-02 09:35 3人阅读 评论(0) 收藏
A. Expression time limit per test1 second memory limit per test256 megabytes inputstandard input out ...