css布局居中和CSS内容居中区别和对应DIV

一、相识结构居中与形式居中

1、CSS DIV布局居中
布局居中是对框架盒子自身设置。让网页主体水平居中于浏览器中，就需配置margin:0 auto完成构造居中。

布局居中针对框架盒子本身居中。

机关居中主要是对构造框架设置装备摆设比方（DIV盒子）设置装备摆设。通常网页布局中最外层主体框架设置机关居中格式（margin:0 auto）完成。假设不设置装备摆设机关居中代码，其有的阅读器中主体是居中的，但有的涉猎器中靠左展现，惹起兼容性问题，所以要让一个盒子水平居中于阅读器中就必须配置一个margin:0 auto样式。

共性：完成居中颇为分外使用margin花样完成，须要额定留神。

2、CSS DIV模式居中
与DIV组织居中有着一样居中字眼的形式居中，则是对盒子里模式（翰墨、图片等外容）实现水准居中。使用CSS花式单词与值代码为text-align:center。不论是对div标签、h1标签、h2标签、p标签等html元素标签设置都能让其对付盒子里形式程度居中。

扩张CSS代码：
CSS内容居中：text-align:center
CSS形式靠左：text-align:left
CSS内容靠右：text-align:right

二、两者素质辨别

CSS构造居中：对框架配置程度居中（譬如对DIV自己设置装备摆设DIV水平居中于浏览器中）。

CSS形式居中：对盒子里的形式设置程度居中（譬喻DIV内放到图片、文字等外容）

三、运用目标

CSS结构居中完成主体水平居中于浏览器；CSS模式居中完成框架盒子内的内容居中。拿DIV布局来讲，前者对DIV框架盒子自己配置程度居中，后者对DIV里装的内容程度居中。

四、居中容易图文案例

1、构造居中
为了能窥察到结构居中成效，我们对一个DIV配置css宽度300px;css高100px；CSS边框为红色，并设置装备摆设布局居中代码margin:0 auto

1）、完整DIV CSS代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简单机关实例 CSS5</title>
<style>
.CSS5{ margin:0 auto; width:300px; height:100px; border:1px solid #F00}
</style>
</head>
<body>
<div class="CSS5">结构居中容易实例</div>
</body>
</html>

2）、机关居中功效截图

DIV CSS布局居中实例效果图 DIV CSS布局居中实例造诣截图

2、形式居中为了能考察到内容居中、居左、居右效果，咱们设置装备摆设3个div盒子一样宽度300px;高100px；CSS边框为赤色，离别设置装备摆设居中、居右、居左花样。

1）、残缺HTML代码（DIV CSS代码）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>容易内容居中与组织居中实例 CSS5</title>
<style>
.CSS5{margin:0 auto;width:300px;height:100px;border:1px solid #F00;text-align:center;}
</style>
</head>
<body>
<div class="CSS5">机关居中与模式居中简单实例</div>
</body>
</html>

加了text-align:center便可实现让盒子内内容居中

2）、内容居中功效截图

实现CSS内容居中效果图完成CSS形式居中功效截图

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-tool/t52723.shtml