<!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. HDU 1885 Key Task 国家压缩+搜索

    点击打开链接 Key Task Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  2. MyBatis系列教程(六)-- 与Spring综合（Integrate with Spring）

    其它工具或技术需要使用: 项目管理工具 : Maven 前台WEB图库:JSP 其他框架:Spring, Spring MVC 数据库 : Derby Maven的Web项目 Maven Depend ...

  3. T-Sql（一）简单语法

    原文:T-Sql(一)简单语法 Sql Server是鄙人学习的第一种数据库,对Sql Server有一种特别的情感,下面就说一下Sql Server的简单语法,适用初学者. 1,创建数据库creat ...

  4. 【转】Directx11 HelloWorld之HLSL的Effect框架的使用

    最近尝试用了下Directx下的Effect框架,作为一初学者初学者,说下为什么我们要使用Effect框架及其好处吧. 首先Effect最大好处的就是简单,使得编写Shader绘制的程序工作量大大下降 ...

  5. RH033读书笔记(12)-Lab 13 Finding and Processing Files

    Sequence 1: Using find Scenario: Log in as user student. Devise and execute a find command that prod ...

  6. ZOJ3629 Treasure Hunt IV（找到规律，按公式）

    Treasure Hunt IV Time Limit: 2 Seconds      Memory Limit: 65536 KB Alice is exploring the wonderland ...

  7. MSSQL基础

    前言 最近看到一些关于sql的汇总博客,觉得还是很不错的.于是心血来潮,也想写一篇自己对这方面的一些认识(主要是点出一下自己比较少用demo写的,一般都是直接改设计时的,例如建表.该字段名). 一.数 ...

  8. SPOJ SUBLEX 7258. Lexicographical Substring Search

    看起来像是普通的SAM+dfs...但SPOJ太慢了......倒腾了一个晚上不是WA 就是RE ..... 最后换SA写了...... Lexicographical Substring Searc ...

  9. 比NotePad++更好的文本代码(C#)编辑器Sublime Text

    原文:比NotePad++更好的文本代码(C#)编辑器Sublime Text 前言 前两天在博客园看到@晴天猪的博客发表的关于他使用的代码编辑器,自己索性试了一下,果断好用,自己也来记录一下.以便以 ...

  10. Java Web整合开发(16) -- Struts 2.x 概述

    Struts2与Spring的整合 •Struts2框架为配合与Spring3框架进行整合,提供了相应的拦截器. •该组件名为StrutsSpringObjectFactory,位于struts2-s ...