<!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. 【线段树】BAPC2014 E Excellent Engineers (Codeforces GYM 100526)

    题目链接: http://codeforces.com/gym/100526 http://acm.hunnu.edu.cn/online/?action=problem&type=show& ...

  2. 【动态规划】【KMP】HDU 5763 Another Meaning

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5763 题目大意: T组数据,给两个字符串s1,s2(len<=100000),s2可以被解读成 ...

  3. [FreeProxy]FreeProxy代理服务器端软件介绍 之 sock 5

    首先在FreeProxy上创建一个sock5 service 然后在Client 设置使用sock5

  4. Single Number III——LeetCode

    Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...

  5. bzoj 1055 [HAOI2008]玩具取名（区间DP）

    1055: [HAOI2008]玩具取名 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1258  Solved: 729[Submit][Statu ...

  6. Redis的Java客户端Jedis的八种调用方式(事务、管道、分布式)介绍

    jedis是一个著名的key-value存储系统,而作为其官方推荐的java版客户端jedis也非常强大和稳定,支持事务.管道及有jedis自身实现的分布式. 在这里对jedis关于事务.管道和分布式 ...

  7. 如何修改WAMP中mysql数据库账号和密码

    WAMP安装好后,mysql密码是为空的,那么要如何修改呢?其实很简单,通过几条指令就行了,下面我就一步步来操作. 首先,通过WAMP打开mysql控制台. 提示输入密码,因为现在是空,所以直接按回车 ...

  8. uva12118

    一开始以为直接算联通块个数就行了 后来发现还得分联通块里的奇点... 还要注意m = 0的情况... #include<iostream> #include<algorithm> ...

  9. opencv2对读书笔记——使用均值漂移算法查找物体

    一些小概念 1.反投影直方图的结果是一个概率映射,体现了已知图像内容出如今图像中特定位置的概率. 2.概率映射能够找到最初的位置,从最初的位置開始而且迭代移动,便能够找到精确的位置,这就是均值漂移算法 ...

  10. 使用Listener准备application作用域数据

    在程序中.有些数据我们希望在程序启动的时候就准备好,而且仅仅准备一次,放在application作用域中,这时候.我们一般会用Listener来准备这些数据. 可是,用Listener准备applic ...