<!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. Cleaning Shifts（区间覆盖）

    /* http://acm.hdu.edu.cn/webcontest/contest_showproblem.php?pid=1019&ojid=1&cid=10 题目: 给定一个时 ...

  2. I - Fire Game

    题目大意: 火焰游戏 在一个];][] = { {,},{,},{-,},{,-} };; i<M; i++)    ; j<N; j++)    {        )           ...

  3. HTTP协议之状态码详解

    转自:http://www.cnblogs.com/TankXiao/ 什么是HTTP状态码 HTTP状态码的作用是:Web服务器用来告诉客户端,发生了什么事. 状态码位于HTTP Response ...

  4. Spring task任务调度详解

    spring内部有一个task是Spring自带的一个设定时间自动任务调度 task使用的时候很方便,但是他能做的东西不如quartz那么的多! 可以使用注解和配置两种方式,配置的方式如下 引入Spr ...

  5. Mysql binlog日志解析

    1. 摘要: Mysql日志抽取与解析正如名字所将的那样,分抽取和解析两个部分.这里Mysql日志主要是指binlog日志.二进制日志由配置文件的log-bin选项负责启用,Mysql服务器将在数据根 ...

  6. docker安装lnmp 环境

    docker基础知识请转 docker中文文档:http://docker-doc.readthedocs.io/zh_CN/latest/index.html docker英文文档: https:/ ...

  7. 缓存的概念（反向代理、CDN）

    缓存在我们的日常开发中随处可见,理解缓存的概念,本质就是就近处理,比如很多热点数据,访问量很多,我们需要使用,就可以把它 缓存起来,然后下次访问就不用再去数据库的去查询了,而是直接使用缓存,现在说说大 ...

  8. C++中一个函数隐藏的有趣例子

    函数隐藏是一个函数的定义或声明导致其他一些函数不可见. 函数A隐藏函数B的条件:      1. 两个函数具有相同的函数名称      2. 具有不同的作用域.所谓定义域函数定义或声明的位置,如全局作 ...

  9. [AngularJS] Use ng-model-options to limit $digest

    Refer: http://toddmotto.com/super-fast-angular-ng-model-options-limit-digest-cycles/ Use: <input ...

  10. iOS-获取UIView的全部层级结构

    在iOS中获取UIView的全部层级结构 应用场景 在实际 iOS 开发中,非常多时候都须要知道某个 UI 控件中包括哪些子控件,而且分清楚它们的层级结构和自个的 frame 以及 bounds ,以 ...