这两天一直忙着前端UI的事，前端布局这块下了很多工夫，很多第三方布局框架如Bootstrap和layUI等虽然很好使用，但是前端你懂的，实际用起来总得缝缝补补，烦啊。
今天就遇到了一个要让div容器内的元素居中对齐的需求，虽然其他的框架样式也很多，但是不适合我的情况，于是就想办法自己改样式，终于发现了一个方法：就是padding（容器内补）
之前是这样的：
<div class="media" style="border: 1px solid #ddd;">
<div class="media-left pull-left">
<div><img style="border: 1px solid red; 60px; height: 60px;" class="img-circle img-responsive" src="img/logo.png" /></div>
</div>
<div class="media-body">
<div>content</div>
</div>
<div class="media-right" >
<div><i class="fa fa-angle-right fa-lg"></i></div>
</div>
</div>
页面是这样的：
最后想起来：干脆自己做个div容器自己加上对应的内补不就好了吗，这样就能自己调整居中位置了。
<div class="media" style="border: 1px solid #ddd;">
<div class="media-left pull-left" style="border: 1px solid red;">
<div><img style="border: 1px solid red; 60px; height: 60px;" class="img-circle img-responsive" src="img/logo.png" /></div>
</div>
<div class="media-body" >
<div style="padding: 18px 15px">content</div> //加上padding，让自己的元素在自己的容器内看起来居中，自己的div容器则在bootstrap的容器中自适应，不用关心
</div>
<div class="media-right" style="padding: 18px 15px">
<div><i class="fa fa-angle-right fa-lg"></i></div>
</div>
</div>
最后页面居中了
