基本的html结构：
p1
p2
p3
p4
p5
欲实现效果：
文章图片
浮动元素居中的出现条件：
*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去掉）
除此之外，我们还可以使用如下代码：
p1
p2
p3
p4
我们发现也能够实现居中效果，但是其可扩展性较差，如果删除一个p或者添加一个p，则需要对.divs div这个样式里的width进行修改
转自
【html css控制浮动元素居中显示】http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120125625634853/
