HTML-盒子水平居中

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

1. 必须是块级元素。

2. 盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

	
	
	


	

		认识一周了
	

浏览器显示结果

1. 文字水平居中是 text-align: center

2. 盒子水平居中 左右margin 改为 auto

1. 文字水平居中是  text-align: center
2. 盒子水平居中  左右margin 改为 auto 

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */

1. 插入图片 我们用的最多 比如产品展示类

2. 背景图片我们一般用于小图标背景 或者 超大背景图片