<!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>div元素上下左右居中</title>

 <style type="text/css">

 .divp{ width:300px; height:300px; background:#ccc; margin:0 auto; position:relative;}

 .div1{ width:100px; height:100px; background:pink; margin:auto; position:absolute; top:0px; right:0px; bottom:0px; left:0px;}

 </style>

 </head>

 <body>

 <div class="divp">

 <div class="div1"></div>

 </div>

 </body>

 </html>

div元素上下左右居中的更多相关文章

  1. 使一个div元素上下左右居中

    第一种方法 浮动流自我调节 .box{ widht:200px; height:200px; position:relative; } .box .son{ width:100px; height:1 ...

  2. CSS 控制元素 上下左右居中

    不说废话,直接 搞起..... 首先,我们将题目 <css控制元素上下左右居中> 分析一下哈,我是将其分成了4部分信息: 1.CSS控制: 只用 CSS 来达成目的 2.元素:  不只是d ...

  3. div层上下左右居中

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

  4. css 宽高自适应的div 元素 如何居中 垂直居中

    在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法 上代码 下面的是 结构代码 <div class=" ...

  5. div内容上下左右居中

    <!-- 遮罩层 --> <div id="test" > <div style="position:absolute;top:50%;le ...

  6. 多行文字在一个div中上下左右居中

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

  7. css div图片上下左右居中

    <style type="text/css"> div{border:1px solid #ccc;height:500pc;width:500px;text-alig ...

  8. css：子元素div 上下左右居中方法总结

    最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...

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

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

随机推荐

  1. ueditor文本编辑器的使用

    1,头部引用 <link href="ueditor/themes/default/css/ueditor.css" rel="stylesheet" t ...

  2. 问题：DataGrid该行并不总是很清楚验证错误（删除）， 解决方案，如下面

    转载,收藏转载请注明出处http://blog.csdn.net/metal1/article/details/37568391 景象:于DataGrid进数据有误,行验证返回new Validati ...

  3. 认识Backbone (一)

    Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...

  4. 谈谈CListCtrl 扩展风格设置方法-SetExtendedStyle和ModifyStyleEx 比較

    谈谈CListCtrl 扩展风格设置方法 --------------------------------------SetExtendedStyle和ModifyStyleEx 比較 对于刚開始学习 ...

  5. canvas绘制百分比圆环进度条

    开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式   2. 静默方式   // 贴上代码,仅供参考 ...

  6. Android－管理Activity生命周期 －重新创建Activity

    按照正常的app行为,很少情况下activity会销毁,只有当用户点击了返回按钮或者activity通过调用finish()发出销毁信号.系统也有可能销毁activity如果它是停止状态并且很久没有使 ...

  7. flashfxp3.41中文版注册码:(适合最新版本)

    推荐(尚未被封的 Realkey) FLASHFXPvACq2ssbvAAAAAC1W7cJKQTzmx77zmqJICvA7d3WnU tWNXdrp8YuERRFdIvXfOPbcpABkVix2 ...

  8. 一个简单的样例看明确怎样利用window.location.hash实现ajax操作时浏览器的前进/后退功能

    我们知道JavaScript中非常早就提供了window.history对象,利用history对象的forward().go().back()方法可以方便实现不同页面之间的前进.后退等这样的导航功能 ...

  9. cocos2dX 音乐和声音效果

    今天, 我们学习cocos2dX里面音乐和音效, 为什么学他呢, 难道你喜欢看无声电影( 旁白: 我就喜欢关着声音玩), 我们不要管旁白了, 她是个疯子 老规矩, 资源准备好: 一首<故宫神思& ...

  10. SQL Server审计功能入门：更改跟踪(Change Tracking)

    原文:SQL Server审计功能入门:更改跟踪(Change Tracking) 介绍 更改跟踪是一种轻量型解决方案,它为应用程序提供了一种有效的更改跟踪机制.常规的,自定义变更跟踪和读取跟踪数据, ...