css居中显示代码怎么写,div居中代码 DIV水平居中显示CSS代码

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

2018-09-07

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

如何使用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代码

html>

div居中 在线演示 www.divcss5.com

body{ text-align:center}

.div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00}

/* css注释：为了观察效果设置宽度 边框 高度等样式 */

DIVCSS5实例

2、div+css居中实例截图

div实现居中效果截图

3、div居中代码应用特点

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

4、在线演示：查看案例

5、打包下载：

立即下载 (1KB)

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

我要分享到：

上一篇：div css margin-left认识与实例

下一篇：DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏

必备CSS教程 Essential CSS Tutorials

·css height

·css line-height

·css width

·css min-width

·css max-width

·css min-height

·css max-height

·css border

·css background

·css float

·css clear

·css display

·css font

·css text-transform

·css英文首字母大写

·css font-variant

·css font-weight

·css font-style

·css text-decoration

·css 删除线

·div css 虚线

·css 注释

·html 注释

·css padding

·css margin

·css 文本

·css font-size

·css font-family

·css color

·css text-align

·css text-indent

·css 超链接(css a)

·css 优化压缩

·css id(css #)

·css class(css .)

·css ul li列表

·css 圆角圆边

·css 父级子级

·css 指针概念

·css cursor

·css overflow

·html px em pt网页单位

·CSS important

·CSS position

·css z-index

·css white-space

·css img图片

·css class id

·css link与@import区别

·css 选择器

·css引入html

必备HTML基础教程 Essential HTML Tutorials

·html img图片标签

·html em标签(EM强调标签)

·html strong加粗(strong标签)

·html B加粗(b加粗标签)

·strong与B加粗区别

·h1 h2 h3 h4标签(html标题标签)

·html A超链接锚文本

·html注释

·html head头部标签

·html title标题标签

·html meta标签

·html link标签

·html i斜体标签

·html u下划线标签

·html s删除线标签

·html换行br标签

·html p段落标签

·p标签与br标签区别

·html div标签元素

·html span标签

·html font标签

·html script标签

·html px em pt网页单位

·html ul li列表

·ol li列表

·dl dt dd标签组

·table tr td表格

·table tr th表格

·html form表单

·html form input

·html form textarea文本区域

·html select下拉与跳转(Html select)

·html iframe框架

·html网页结构

·htm html shtml区别用法

·网页编码charset

·UTF-8 GBK UTF8 GB2312区别联系

·先写html还是先写CSS

·显示扩展名

·html标签大全集合

·html常用标签

·网页源代码是什么

如对文章有任何疑问请提交到DIV CSS论坛，或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。

CSS教程文章修订日期：2013-09-25 17:37 原创：DIVCSS5

本文www.divcss5.com DIVCSS5版权所有。

免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。

http://www.pinlue.com/style/images/nopic.gif