基本的html結構：
<div>
<!--
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</div>
欲實現效果：
*1.首先是內部元素需要設置寬高
*2.元素需要同行顯示
*3.元素需要居中
分析：如果想對一個元素設置寬高，那么元素類型就不能夠是行內元素，只能夠是塊狀元素）
*如果內部開始為塊狀元素時，如p元素，只能使用float使其同行顯示(float又會改變顯示模式)，但如果進行居中處理，則會發現margin:0 auto;屬性失效
*如果內部初始為行內元素，因為不能設置寬高，勢必會將其轉化為塊狀元素，即display:block;然后float:left，此時發現父級元素的text-align:center居中屬性也失效了
具體看一個實例
首先把里面的元素設置為p標簽，對p標簽設置100寬高，為了方便查看加上了邊框和背景色
此時，margin這個屬性是生效的，所有的塊狀元素均能夠居中顯示
此處使用span標簽進行試驗
也是設置寬高均為100，為了方便查看加上了邊框和背景色，此時父元素有一個屬性是：text-align:center;
顯示效果如下，所有的span位於同一行，也能夠居中，但是由於是行內元素，寬高不生效
此時添加上了display:block;將所有的span轉化為了塊狀元素的顯示效果，發現寬高能夠正常顯示了，但是卻不位於同一行了，而且也不能夠居中
此時如果加入float:left和margin:0 auto; 發現顯示效果和使用p元素一樣，出現了居中屬性失效
設置外層的div的text-align:center;
然后設置span標簽的display為inline-block 去掉之前定義的margin和float
效果如圖
然后設置p標簽的display為inline-block 去掉之前定義的margin
效果如本文第一張圖片效果
一般通常會在內部這幾個標簽外部套一個div或其他標簽，更好的控制
使用到的display:inline-block這個是什么意思呢？
它指的是將本身設置成為block顯示類型，將自己的父元素設置為inline顯示類型。再在外層的大框上加上text-align:center即可以實現元素的居中（注意此時內層的float去掉）
除此之外，我們還可以使用如下代碼：
<style type="text/css">
.divs{background:#ccc;width:600px;height:300px;margin:50px auto 0;}
.divs div{margin:0 auto;background:#000;width:400px;text-align:center;}
p{float:left;height:100px;width:98px;background:#fff;border:1px solid red;margin:0 auto;}
</style>
<body>
<div class="divs">
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
</div>
</div>
</body>
我們發現也能夠實現居中效果，但是其可擴展性較差，如果刪除一個p或者添加一個p，則需要對.divs div這個樣式里的width進行修改