原文地址：http://www.divcss5.com/rumen/r622.shtml

如何使用CSS让DIV居中显示，让div水平居中有哪些CSS样式呢？

需要的主要css代码有两个，一个为text-align:center（内容居中），另外一个为margin:0 auto；其两个样式需要配合使用才能实现div盒子的居中显示排版。

首先我们对body设置text-align:center，再对需要居中的div盒子设置css样式margin:0 auto，这样即可让对应div水平居中。

实例讲解div居中代码应用，为了观察div居中效果，我们对div设置一个div命名为“.div”在html中div标签内使用class=“div”,设置其宽度为400px;高度为100px，边框为红色。以便我们观察效果。

1、完整html+css代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>div居中 在线演示 www.divcss5.com</title>
  6. <style>
  7. body{ text-align:center}
  8. .div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00}
  9. /* css注释：为了观察效果设置宽度 边框 高度等样式 */
  10. </style>
  11. </head>
  12. <body>
  13. <div class="div">
  14. DIVCSS5实例
  15. </div>
  16. </body>
  17. </html>

2、div+css居中实例截图


div实现居中效果截图

3、div居中代码应用特点
此居中方法是让div居中效果完美兼容各大平台、兼容各大浏览器，无论高版本ie还是高版本的ie均兼容。

【转】div居中代码 DIV水平居中显示CSS代码的更多相关文章

  1. 水平居中显示CSS

    HTML代码部分 <div class="center" > <img style="margin:0 auto ;" :src=item.i ...

  2. div居中与div内容居中,不一样

    1.div自身居中 使用margin:0 auto上下为0,左右自适应的css样式. 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠 ...

  3. 整个网站灰度显示css代码

    body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms- ...

  4. 实现DIV居中的几种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 页面css代码

    博主原来的页面css代码 (这个是原来的那种效果,差不多弄出来会是这种效果http://www.cnblogs.com/thmyl/) /*simplememory*/ #google_ad_c1, ...

  6. 高效的CSS代码(2)

    ——阅读笔记,欢迎纠错^_^ 内容比较零散..... 1.让浮动元素的父容器根据元素的高度而自适应高度的方法: <div class="clearfix"><di ...

  7. CSS 代码是什么?（转）

    转自:http://www.divcss5.com/rumen/r95.shtml CSS 代码是什么,什么是CSS代码? 目录 什么是CSS css代码样子(图) 作用 相关扩展阅读 一.了解什么是 ...

  8. CSS代码重构与优化之路

    作者:@狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多, ...

  9. CSS代码重构

    CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS代码重构主要有两个目的:1.提高代码性能2.提高代码的可维护性 提高代码性能 提高 ...

随机推荐

  1. [转]artDialog

    本文转自:http://aui.github.io/artDialog/ http://aui.github.io/artDialog/doc/index.html artDialog —— 经典的网 ...

  2. 读《深入理解Java虚拟机》有感——第一部分:Class文件的结构

    1.产生 源码(.java文件)——>编译器(如:javac)——>字节码(.class文件)——>虚拟机(如:HotSpot)执行 2.Class文件  1)构成:         ...

  3. codeforces 713B B. Searching Rectangles(二分)

    题目链接: B. Searching Rectangles time limit per test 1 second memory limit per test 256 megabytes input ...

  4. MATLAB基本命令

    eye(n)创建n阶单位矩阵 zeros(n)创建n阶0方阵 rand(m,n)创建m*n阶元素为从0到1的均匀分布的随机数矩阵 round(A)对矩阵A中所有元素进行四舍五入运算 A^-1用幂运算求 ...

  5. AC日记——搞笑世界杯 codevs 1060(dp)

    题目描述 Description 随着世界杯小组赛的结束,法国,阿根廷等世界强队都纷纷被淘汰,让人心痛不已. 于是有 人组织了一场搞笑世界杯,将这些被淘汰的强队重新组织起来和世界杯一同比赛.你和你的朋 ...

  6. Update和LateUpdate的区别

    LateUpdate晚于所有Update执行 在圣典里LateUpdate被解释成一句话:LateUpdate是在所有Update函数调用后被调用.这可用于调整脚本执行顺序. 当物体在Update里移 ...

  7. 服务器操作系统应该选择 Debian/Ubuntu 还是 CentOS？

    来自 http://www.zhihu.com/question/19599986 服务器操作系统应该选择 Debian/Ubuntu 还是 CentOS? 想选择一个 Linux 发行版作为服务器. ...

  8. 作业调度Quartz.NET

    Quartz.NET是一个开源的作业调度框架,是OpenSymphony 的 Quartz API的.NET移植,它用C#写成,可用于winform和asp.net应用中.它提供了巨大的灵活性而不牺牲 ...

  9. swift 判断输入的字符串是否为数字

    // 判断输入的字符串是否为数字,不含其它字符 func isPurnInt(string: String) -> Bool { let scan: Scanner = Scanner(stri ...

  10. Dottrace跟踪代码执行时间

    当自己程序遇到性能问题,比如请求反应缓慢,怎么分析是哪里出了问题呢?dottrace可以帮助.net程序跟踪出代码里每个方法的执行时间,这样让我们更清晰的看出是哪里执行时间过长,然后再分析应该怎样解决 ...