css中盒子模型实现水平居中，垂直居中

盒模型水平居中

1. 使用margin+width来实现，已知width有明确的宽度。

css样式：

<style type="text/css">
		section{
   
			width:80%;
			百分比的形式是说浏览器宽度的80%		
			height: 300px;
			margin: 200px auto;
			上下外边距200像素，左右auto，方可实现水平居中。
			border: 1px solid #000;
		}
	</style>


HTML结构：
<section>
		<div>一</div>
		<div>二</div>
		<div>三</div>
	</section>

2. 使用text-align+inline-block的方式，width在不固定的情况下。

css样式：
<style type="text/css">
		section{
   
			text-align: center;
		}
		section div{
   
			display:inline-block