html居中通用办法

首先需要一整行。

<div class="row"></div> 

row自带block，所以占满一行，然后它会有margin-left和margin-right，保证左右都会超出一点点，大概30px。

这时候如果需要4块区域来展示的话，这样写

<div class="col-md-3"></div>

以此类推，根据需求划分区域，如果是奇数的话，只能自己写col-md-1.5这种样式了，其实很简单，把官方有的样式复制过来一套即可。

这个时候需要想一下每块区域里面的内容了，一般是一个居中的小图片，然后下面是文字说明等等。

图片的话需要用一个div包裹起来，好调整它的尺寸。

这个包裹图片的div非常关键，我们暂且称之为img-box吧。

<div class="img-box">

<img src="...">

</div>

这个img-box必须包含以下属性：

1.宽高

2.margin:0 auto

两者都满足的话，会在之前划分好的区域中自动居中。位置的话结合区域的padding稍作调整。

然后是文字说明部分。

需要一个<h5>blablabla</h5>

最好还加上一个解释说明<p>blablabla</p>

然后稍作修饰，比如给区域加上边框之类的。

所以整个代码看起来应该是这样的：

<div class="row">

<div class="col-md-3">

<div class="img-box">

<img src="...">

</div>

<h5>...</h5>

<p>...</p>

</div>

</div>