如何让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 ...
随机推荐
- iOS 处理多个网络请求的并发的情况
如何处理多个网络请求的并发的情况 一.概念 1.并发 当有多个线程在操作时,如果系统只有一个CPU,则它根本不可能真正同时进行一个以上的线程,它只能把CPU运行时间划分成若干个时间段,再将时间 段分配 ...
- 27、oracle(三)
1)掌握增.删.改数据和事务操作 2)掌握[视图]和同义词 3)掌握[序列]和索引 4)了解有关用户和权限的控制 ------------------------------------------- ...
- tar 报错gzip: stdin: not in gzip format
今天在linux下 用tar -zxvf xxx.tar.bz2 然后就报这个错. gzip: stdin: not in gzip formattar: Child returned status ...
- 周赛-Expression 分类: 比赛 2015-08-02 09:35 3人阅读 评论(0) 收藏
A. Expression time limit per test1 second memory limit per test256 megabytes inputstandard input out ...
- oracle驱动地址
D:\app\LHComputer\product\12.1.0\dbhome_1\ODP.NET\bin\2.x
- csharp通过dll调用opencv函数,图片作为参数
[blog 项目实战派]csharp通过dll调用opencv函数,图片作为参数 一直想做着方面的研究,但是因为这个方面的知识过于小众,也是由于自己找资料的能力比较弱,知道今天才找 ...
- 什么是RAW数据?
现在数码照片的存储格式,以及在网络上应用的最普遍的图片格式就是JPEG格式了(Joint Photographic Expert Group).但是作为一种有损的图像压缩格式(现在也有少数数码相机提供 ...
- HTTP 错误 404.2 - Not Found
前几天刚安装Windows Server 2008 r2 sp1 遇到问题之后,昨天我又遇到一个问题(但我不害怕有问题),提示: HTTP 错误 404.2 - Not Found由于 Web 服务器 ...
- ceil floor函数
> a=6.4> b=math.ceil(a)> print(b)7> c=math.floor(a)> print(c)6 ceil向上取整 floor向下取整
- ADO SQL属性扩展————多表组合成新的更完整的表
create database guoji--建立数据库 go use guoji go create table xinxi--建立表一 ( name ), minzu ) ) '); '); ') ...