<!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. ink_test

  2. Java---JUnita、注解与类加载器详解以及实例

    JUnit软件测试技术(工具) 在项目中建立专门用户测试的包结构. 在Junit中,通过@Test注解,可以运行一个方法. ★ Junit注解说明 使用了@Test注解应该满足以下条件: 1) 必须是 ...

  3. angularJS constant和value

    angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的. 相同点是:都可以接受两个参数,name和value. 区别: 1.co ...

  4. 安装 Panda3D 并使用原有的Python

    Part 1:什么是Panda3D [原始网站] [中文版本] Part 2:注意事项 Panda3D的版本必须与Python相匹配 Part 3:使用已安装的Python 将‘C:\Panda3D- ...

  5. (转)cocos2dx 内存管理

    原文地址:http://blog.csdn.net/ring0hx/article/details/7946397 cocos2dx的内存管理移植自Objective-C, 对于没有接触过OC的C++ ...

  6. Spring 3整合Quartz 2实现定时任务--转

    常规整合 http://www.meiriyouke.net/?p=82 最近工作中需要用到定时任务的功能,虽然Spring3也自带了一个轻量级的定时任务实现,但感觉不够灵活,功能也不够强大.在考虑之 ...

  7. iOS 10 个实用小技巧（总有你不知道的和你会用到的）

    在开发过程中我们总会遇到各种各样的小问题,有些小问题并不是十分容易解决.在此我就总结一下,我在开发中遇到的各种小问题,以及我的解决方法.比较普遍的我就不再提了,这里主要讲一些你可能不知道的(当然,也有 ...

  8. 新一代 PHP 加速插件 Zend Opcache <转>

    注: 由于原链接已不存在, 所以我把图片重新整理了一下, 以便看起来更加直观 笔者注: 1>  PHP 性能提升之 PHP NG  =>  php next generation wiki ...

  9. SSH常用命令选项

    SSH 是什么 SSH(全称 Secure Shell)是一种加密的网络协议.使用该协议的数据将被加密,如果在传输中间数据泄漏,也可以确保没有人能读取出有用信息.要使用 SSH,目标机器应该安装 SS ...

  10. JPA事务回滚配置

    <!-- 配置事务管理器 --> <bean id="transactionManager" class="org.springframework.or ...