<!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. Codeforces 715A & 716C Plus and Square Root【数学规律】 (Codeforces Round #372 (Div. 2))

    C. Plus and Square Root time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  2. SRM 504.5(2-1000pt)

    DIV2 1000pt 题意:一群人排队,每次操作由要骰子决定,只要没有人中奖,游戏就不结束.若摇骰子摇出4,则队列第一个人中奖:否则,若摇的是奇数,则第一个人排队到队伍末尾去:否则,第一个人出局.若 ...

  3. hdu 4607 Park Visit (dfs)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4607 首先如果k小于等于直径长度,那么答案为k−1.如果k大于直径长度,设直径长度为r,那么答案为r− ...

  4. u盘启动openwrt

    opkg update opkg install kmod-usb-ohci kmod-usb2 kmod-fs-ext3 opkg install kmod-usb-storage reboot m ...

  5. HDU 1247

    简单的字典树 - -,求一个单词是否由两个单词组成 #include<iostream> #include<cstring> #include<cstdio> us ...

  6. poj1017

    一个工厂制造的产品形状都是长方体,它们的高度都是h,长和宽都相等,一共有六个型号,他们的长宽分别为1*1, 2*2, 3*3, 4*4, 5*5, 6*6.这些产品通常使用一个 6*6*h 的长方体包 ...

  7. java MessageFormat 应用 和 疑惑

    先来个demo String string = "{0}\"{1}\""; System.out.println(MessageFormat.format(st ...

  8. 隐式intent

    使用隐式Intent,我们不仅可以启动自己程序内的活动,还可以启动其他程序的活动, 这里我们首先指定了Intent的action是Intent.ACTION_VIEW,这是一个Android系统内置的 ...

  9. Excel导入mysql数据库

    步骤一:选取要导入的数据快儿,另外要多出一列,如下图:    步骤二:  将选中的数据快儿拷贝到一个新建的表格工作薄,然后“另存为” ->“文本文件(制表符分割)(*.txt)”,假如存到“D: ...

  10. Toast的使用具体解释

    Android中提供一种简单的Toast消息提示框机制,能够在用户点击了某些button后,提示用户一些信息,提示的信息不能被用户点击,Toast的提示信息依据用户设置的显示时间后自己主动消失.Toa ...