欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

div居中代码 DIV水平居中显示CSS代码

如何使用CSSDIV居中显示,让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 css实现居中效果截图
div实现居中效果截图

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

4、在线演示:查看案例

5、打包下载:

6、居中相关CSS教程
1)、div居中
2)、css字体居中
3)、div图片居中
4)、css垂直居中
5)、css背景居中
6)、div内容居中
7)、div align center
8)、ie9不能垂直居中
9)、css居中

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r622.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2013-09-25 17:37 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。