将float元素居中的⼏种办法
在HTML+CSS布局中，元素的居中⼀直是定位⾮常重要的部分。
下⾯这些⽅法基本上是我在⽹上查阅资料以及⾃⼰的⼀些思考改良所得，不完全算是⾃⼰的原创。
1、垂直居中（容器内垂直居中）
思路：在float元素外层加⼀个div，然后在css中设置display属性。
外层DIVcss样式：
div{
div中的div居中display: table-cell;
margin: 0 auto;
}
2.⽔平居中
⽅法⼀思路、在float元素外层加⼀个table ，在css中设置table的属性：
table{
margin: 0 auto;
}
⽅法⼆思路、在float元素外层加⼀个div，设置外层div position 为 relative，float元素 position 为 absolute，然后通过相互的偏移量抵消来设置：
.outer{
position: absolute;
left: 50%;
}
.inner{
position: relative;
float: left;
left: -50%;
width: 200px;
height: 200px;
background-color: #000;
}
⽅法三思路、在外层包裹⼀个div，设宽度与浮动元素总宽度相等，让外层div：margin:0  auto。
.outer{
margin: 0 auto;
width: 400px;
}
.
inner{ /*这⾥我设置了两个浮动元素*/
float: left;
width: 200px;
height: 200px;
background-color: #000;
}
3、垂直⽔平居中
⽅法⼀、此思路也是从 ⽔平居中 的⽅法三中扩展出来的：在外层加⼀个div，设宽⾼与浮动元素总宽⾼相等，然后设置外层div position 为 absolute ，最后通过left/top 以及margin-left/margin-top的值来调整，但是此⽅法的弊端是扩展性较差，增删⼀个float元素都要去改外部div 的宽⾼以及移动的距离。
.outer {
width: 302px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -151px;
margin-top: -50px;
}
.pp,
.ppp,
.pppp {
float: left;
height: 100px;
width: 98px;
background: #fff;
border: 1px solid #000;
}
⽅法⼆、与⽅法⼀思路相同，只是在CSS中的样式有⼀点⼩差别：
.outer{
width: 50px;
height: 50px;
background:red;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin:auto;
}
.inner{
width: 50px;
height: 50px;
background: #000;
float: left;
}
当然设置了浮动元素之后要记得清除浮动，避免浮动元素带来的⼏⼤问题。
这⾥清除浮动我在查资料的时候，根据资料的分析得出对普通流影响最⼩的清除浮动的⽅式是：
.outer:before,.outer:after { content:""; display:table; }
.outer:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
.outer { zoom:1; }
⾄于原理的话这⼜是⼀篇很长的分析⽂，下次等我吃透了再回来继续 : )

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。