在做登陆页面的话，需要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上下左右都居中的更多相关文章

  1. css+div上下左右自适应居中

    主要记录自己日常积累的布局相关的东西,持续更新中. 1.登录框上下左右自适应居中 以前想要把登录表单始终放置在页面的中间,花了不少心思,一直以来用的解决方法都是用js,感觉有点麻烦不是很好,于是在网上 ...

  2. html 上下左右都居中

    给要居中的图片或者链接所在的div 设置例如以下属性 width: px; height: wd=px&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqI ...

  3. 小div在大div里面水平垂直都居中的实现方法

    关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...

  4. 绝对定位上下左右都为0 margin为auto为什么能居中

    老规矩,先来一段废话,我大学刚入门的时候觉得CSS很简单,记一记就会了,不就是盒模型嘛,现在想来觉得自己那时候真的很自以为是哈哈.但是随着工作沉淀,我明白了任何技术都有着它的深度和广度,正是因为不少人 ...

  5. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  6. 使图片相对于上层DIV始终水平、垂直都居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 如何让图片相对于上层DIV始终保持水平、垂直都居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 如何将一个div盒子水平垂直都居中？

    html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...

  9. css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）

    css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...

随机推荐

  1. Linux中变量#,#,@,0,0,1,2,2,*,$$,$?的含义【转】

    转自:http://www.cnblogs.com/kaituorensheng/p/4002697.html 1 2 3 4 5 6 7 8 $# 是传给脚本的参数个数 $0 是脚本本身的名字 $1 ...

  2. c sharp学习 问题记录

    1.函数的调用可以嵌套,定义不可以 C# 参考之方法参数关键字:params.ref及out C#中方法的参数的四种类型

  3. 今天 同一个Nav 左右button 替换不显示的问题 viewDidLoad, viewWillDisappear, viewWillAppear等区别及各自的加载顺序

    viewWillAppear:  Called when the view is about to made visible. Default does nothing视图即将可见时调用.默认情况下不 ...

  4. Linux下命令行安装WebLogic 10.3.6

    1.创建用户useradd weblogic;创建用户成功linux系统会自动创建一个和用户名相同的分组,并将该用户分到改组中.并会在/home路径下创建一个和用户名相同的路径,比如我们创建的webl ...

  5. ecstore2.0数据库词典

    数据库词典= 数据库tables列表 =|| Name | Comment ||| sdb_aftersales_return_product | 售后申请 || sdb_b2c_brand | 商品 ...

  6. 如何修改ECSHOP后台管理中心的Title信息

    下图中红色圈定的部分就是本次修改要改的地方 修改方法其实很简单的:打开语言包文件  /languages/zh_cn/admin/common.php 将 $_LANG['app_name'] = ' ...

  7. linux正则表达式使用

    首先介绍下正则表达式,它是由一串字符和元字符构成的字符串,简称RE(Regular Expression),它的主要功能是文本查询和字符串操作,它可以匹配一个文本的字符和字符集,达到数据过滤的效果. ...

  8. js命名空间笔记

    在量比较大或者多人编写的情况下,命名冲突就很有可能发生,同一个页面引用了两个命名相同功能不同的文件,调用的时候就会出问题.因此使用JS命名空间很重要. 1.采用字面量方法创建命名空间: var a={ ...

  9. app framework map及ajax方法

    $(function () { $.ajax({ url: 'Ashx/GetProductList.ashx', contentType: "JSON", success: fu ...

  10. SlickGrid example 2: 按想要的风格展示列

    先上效果图. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...