将float元素居中的几种办法

2024-07-13 18:59| 来源: 网络整理| 查看: 265

在HTML+CSS布局中，元素的居中一直是定位非常重要的部分。

下面这些方法基本上是我在网上查阅资料以及自己的一些思考改良所得，不完全算是自己的原创。

1、垂直居中（容器内垂直居中）

思路：在float元素外层加一个div，然后在css中设置display属性。外层DIVcss样式： 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; } 至于原理的话这又是一篇很长的分析文，下次等我吃透了再回来继续 : )

【本文地址】

公司简介

联系我们