將float元素居中的幾種辦法

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

下面這些方法基本上是我在網上查閱資料以及自己的一些思考改良所得，不完全算是自己的原創。

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

思路：在float元素外層加乙個div，然後在css中設定display屬性。

外層divcss樣式：

div

2.水平居中

方法一思路、在float元素外層加乙個table ,在css中設定table的屬性：

table

方法二思路、在float元素外層加乙個div，設定外層div position 為 relative，float元素 position 為 absolute,然後通過相互的偏移量抵消來設定：

.outer

.inner

方法三思路、在外層包裹乙個div，設寬度與浮動元素總寬度相等，讓外層div：margin:0  auto。

.outer

.inner

3、垂直水平居中

方法一、此思路也是從 水平居中 的方法三中擴充套件出來的：在外層加乙個div,設寬高與浮動元素總寬高相等，然後設定外層div position 為 absolute ，最後通過left/top 以及margin-left/margin-top的值來調整，但是此方法的弊端是擴充套件性較差，增刪乙個float元素都要去改外部div 的寬高以及移動的距離。

.outer 

.pp,
.ppp,
.pppp

方法二、與方法一思路相同，只是在css中的樣式有一點小差別：

.outer

.inner

當然設定了浮動元素之後要記得清除浮動，避免浮動元素帶來的幾大問題。

這裡清除浮動我在查詢資料的時候，根據資料的分析得出對普通流影響最小的清除浮動的方式是：

.outer:before,.outer:after 

.outer:after /* for ie 6/7 (trigger haslayout) */ 
.outer

至於原理的話這又是一篇很長的分析文，下次等我吃透了再回來繼續

: )

html居中的元素帶有float屬性

float設定浮動和margin設定居中兩者本身就存在矛盾 解決辦法是 在該元素外加乙個div，設定div為居中，再設定該元素為float 如圖，我要設定藍色背景的div居中，同時我又想讓右側的select框出現在圖中位置。如果設定div為margin 0 auto，則右邊的select框出現在了下...

css 元素居中各種辦法

一 通過彈性布局 style container box container style head body div id container div class box div div 效果如下 二 通過絕對定位來水平居中乙個塊級元素，知道元素寬度，高度 style container box c...

CSS 元素垂直居中的幾種方式

目錄 1.vertical align line height 2.flex 常用 3.display absolute transform 4.margin auto display flex margin auto display absolute margin auto 5.table cel...