基本的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這個屬性是生效的，所有的塊狀元素均能夠居中顯示
p{
margin:0 auto;
height: 100px;
width: 100px;
background: #fff;
border:1px solid red;}效果如下：
這時，爲了讓所有的p元素位於一行，使用float:left
p{
margin: 0 auto;
float: left;
height: 100px;
width: 100px;
background: #fff;
border: 1px solid red;}
顯示效果如下，發現：margin控制的居中屬性失效
說解決辦法之前我們看一下如果內部是行內元素的基本效果
此處使用span標籤進行試驗
也是設置寬高均爲100，爲了方便查看加上了邊框和背景色，此時父元素有一個屬性是：text-align:center;
span{
height: 100px;
width: 100px;
background: #fff;
border: 1px solid red;}顯示效果如下，所有的span位於同一行，也能夠居中，但是由於是行內元素，寬高不生效
span{
display:block;
height:100px;
width:100px;
background:#fff;
border:1px solid red;
}此時添加上了display:block;將所有的span轉化爲了塊狀元素的顯示效果，發現寬高能夠正常顯示了，但是卻不位於同一行了，而且也不能夠居中
此時如果加入float:left和margin:0 auto; 發現顯示效果和使用p元素一樣，出現了居中屬性失效
接下來看解決辦法
設置外層的div的text-align:center;
div{
background:#ccc;
width:600px;
height:300px;
margin:50px auto;
text-align:center;}然後設置span標籤的display爲inline-block 去掉之前定義的margin和float
span{
display:inline-block;
height:100px;
width:100px;
background: #fff;
border: 1px solid red;
}效果如圖
然後設置p標籤的display爲inline-block 去掉之前定義的margin
p{
display:inline-block;
height:100px;
width:100px;
background:#fff;
border: 1px solid red;
}效果如本文第一張圖片效果
一般通常會在內部這幾個標籤外部套一個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進行修改
轉自
http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120125625634853/