<!DOCTYPE html>

     <html>

     <head>

     <meta charset="utf-8" />

     <title>CSS实现div居中</title>

     <style>

     /*外层div居中*/

     #main {

         position: absolute;        /*极为重要*/

         background-color: blue;

         width:400px;

         height:200px;

         left:50%;

         top:50%;

         margin-left:-200px;

         margin-top:-100px;

         border:1px solid #00F;

     } 

     #content {

         position: absolute;        /*极为重要*/

         background-color: yellow;

         width: 200px;

         height: 100px;

         left:50%;

         top:50%;

         margin-left:-100px;

         margin-top:-50px;

         /*div内部文字居中*/

         text-align: center;

         line-height:100px;        /*行间距和div高度相同*/

     }

     </style>

     <body>

         <div id="main">

             <div id="content">

                 Sun

             </div>

         </div>

     </body>

     </html>

CSS实现div居中的更多相关文章

  1. 用CSS控制DIV居中失效的解决方法

    1.一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  2. css使div居中

    每次想要使div居中都会设置position:absolute;,发现设置其他控件位置时会出现问题,所以采用以下办法: margin:0 auto;

  3. CSS动态控制DIV居中

    1.所谓的动态:就是即使手动去拖拉浏览器,DIV还是会自动居中 2.之前一直以为这个事情是JavaScript做的, 步骤:通过先获取页面的Height和Width, 然后定义DIV的Height和W ...

  4. 如何通过CSS让DIV居中对齐

    给Div对应的CSS的添加如下设定即可: MARGIN-RIGHT: auto; MARGIN-LEFT: auto;

  5. 【转】div居中代码 DIV水平居中显示CSS代码

    原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...

  6. HTML CSS 中DIV内容居中汇总

    转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...

  7. 【转】CSS中怎么让DIV居中

    来源:http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html     CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的 ...

  8. CSS中怎么让DIV居中(转载)

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...

  9. CSS中怎么让DIV居中

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...

随机推荐

  1. 【数论】FOJ 2238 Daxia & Wzc's problem

    题目链接: http://acm.fzu.edu.cn/problem.php?pid=2238 题目大意: 已知等差数列A(0)的首项a和公差d,求出数列A(0)前n项和,得到新数列A(1);以此类 ...

  2. C#程序注销、重启、关机和锁定电脑

    一:截图 二:源代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...

  3. 苹果教你六招：设计优秀的icon

    在iOS 7测试版发布后,网上开始出现大量关于iOS 7设计的资源.在WWDC期间,苹果曾为开发者举办了多场主题演讲,其中有一场是苹果UX布道师Mike Stern的精彩演讲-- 优秀iOS设计最佳实 ...

  4. SVN强制注释

    1.目的 在使用SVN作为版本控制的时候,强制提交的人员写注释,这样能确保每次提交都有注释,方便查看 2.解决办法     2.1给工程加上属性          2.1.1在工程提交之后,通过客户端 ...

  5. 作业.把c语言输出的基础差不多都概括了！

    // (1)1英里=1.60931公里,从键盘上输入英里数输出公里数 #include "stdio.h" #define PI 3.1415926 #include " ...

  6. 在一个字符串中找到第一个只出现一次的字符。如输入abaccdeff，则输出b

    偶然在群里看到这个小题, 就用python做了做. 思路就是建一个够大的列表并初始化,把每个字符的asc码作为下标,存到列表里, 然后该位置的值就存字母的出现次数, 最后再迭代原字符串并判断列表值是否 ...

  7. C# 解析js方法，并调用js方法

    本文转载:http://www.cnblogs.com/StudyLife/archive/2013/03/11/2953516.html 本文不是基于B/S的 后台调用前台js方法,而是给你一段js ...

  8. CodeForces 55D Beautiful numbers（数位dp）

    数位dp,三个状态,dp[i][j][k],i状态表示位数,j状态表示各个位上数的最小公倍数,k状态表示余数 其中j共有48种状态,最大的是2520,所以状态k最多有2520个状态. #include ...

  9. 互联网TCP／IP五层模型（一）

    转载自:阮一峰 我们每天使用互联网.你是否想过,它是怎样实现的? 全世界几十亿台电脑,连接在一起,两两通信. 上海的某一块网卡送出信号,洛杉矶的还有一块网卡竟然就收到了.两者实际上根本不知道对方的物理 ...

  10. web系统架构的演进变化很形象

    随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 当网站流量很小时,只需一个应用, ...