<!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. 20那天android得知

    20多天的实习(事实上,一个人学习的东西)要结束, 剩下的只是读研. 这项20许多天我学到了很多东西, 对android的发展也有了一定的了解.之后写这篇文章主要完成的研究可以得知快速回升 1.安德鲁 ...

  2. BZOJ 2007 NOI2010 海拔高度 最小减产计划

    标题效果:YT城市是一个精心规划的城市.这个城市是东西向和南北向干道成n×n地区性.简单.可以YT作为一个城市广场,每个区域也可被视为一个正方形.因此,.YT市中含有(n+1)×(n+1)交叉口和2n ...

  3. 水题 hdu1002------用BigInteger解决大数问题

    Problem Description I have a very simple problem for you. Given two integers A and B, your job is to ...

  4. GitLab一键式安装bitnami

    https://bitnami.com/stack/gitlab/installer https://bitnami.com/redirect/to/96764/bitnami-gitlab-8.5. ...

  5. Android使用开源项目Xutils实现多线程下载文件

    #1.下载utils项目 https://github.com/wyouflf/xUtils #2布局文件里实现UI <LinearLayout xmlns:android="http ...

  6. 解决无法切换到jenkins用户的问题

    su - jenkins一直有效,今天在centos发现无效,原因是 /etc/password文件里的/bin/bash被yum安装的时候变成了/bin/false. 改动后就能够了. ubuntu ...

  7. jQuery Mobile发展新闻阅读器,适应iphone和android打电话

    程序猿是很不赖,你知道. 我们经常新浪,腾讯.雅虎等各大网站看到上述新闻.他们还推出了自己的移动新闻阅读器.今天,我自己用的jQuery Mobile 为了实现这一功能,.图像大小上传限制的大小250 ...

  8. C++ Primer 学习笔记_35_STL实践与分析（9）--map种类（在）

    STL实践与分析 --map类型(上) 引: map是键-值对的集合. map类型通常能够理解为关联数组:能够通过使用键作为下标来获取一个值,正如内置数组类型一样:而关联的本质在于元素的值与某个特定的 ...

  9. [Unity3d]定义自己的鼠标

    [Unity3d]自己定义鼠标 我们在用unity3d开发自己的游戏的时候.自己定义游戏中的鼠标也是常常要用到的.那我就得学学.事实上原理非常easy,先将鼠标给隐藏,然后在鼠标的位置上画出一个自己定 ...

  10. JAVA基金会 （三）反射 反思的深度分析

    上一页已经推出反映的一些基本概念,这主要是通过一个例子反映谈的过程,以及样品的实际应用. 这个样例是这种设计思路:从一个属性文件里读取一段字符串,然后,依据该字符串生成相应的类实例对象:这之后另一个增 ...