1. 水平居中

• 方法一：margin:0 auto; （最常用的居中布局方式）
• 方法二：text-align和inline-block的結合（設置父元素的text-align為center）。

  這種方式最好應用于圖片、按鈕、文字之類的居中模式，否則就需要借助inline-block來進行居中布局。

• 方法三：position絕對定位來實現居中布局。

  適用于塊級元素不給出寬高的情況下(需要借助transtrom的tanslateX方法)。

#parent{position: relative; } #child{position: absolute;top: 0; left: 50%; transform: translateX(-50%); }

• 方法四：利用flex彈性布局的一個屬性。

  子元素寬度已知的情況下

#parent{display: flex;justify-content: center; }

• 其他還有很多方法，一般用的不太多。并且各種方法優缺點不一樣，可選擇性使用。

2. 水平居中及垂直居中

• 方法一：先說一種神奇的方式吧，
• 子元素 div 絕對定位
• 父元素需要被定位
• 子元素 top、bottom、left、right 四個位置值均為 0
• 子元素 margin: auto;

下面代碼是可以實現的，但還有點問題，大家幫小花看看~

#parent{width: 100%;height:100%; position: fixed; } #child{ width: 400px; height: 200px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: #ccc; }

• 方式二：利用position的絕對定位及負邊框來實現。

  #parent{position: fixed;width: 100%;height: 100%; } #child{ position: absolute; left: 50%; top: 50%; width: 400px; height: 200px; margin-top: -100px; margin-left: -200px; background-color: #ccc; }

  對于未給出寬高的元素，又需要請transform登場了，同時需要做好各瀏覽器的兼容。對于我這種懶癌患者，就不給出兼容代碼嘞~

• 其他應該還有一些方法，暫時還沒想到，等寫出來了再補補（哦對了，忘了說flex了，算了還是不寫了）

3. 左邊固定右邊自適應的兩列布局

我猜吧，大家對這種布局方式最熟悉不過了，平時用的也會比較多，所以呢，你們寫的應該都會比我的好~

• 方式一：float+margin的方式

  這種方式一定要記得給父元素清除浮動啊，不然就尷尬了呢，這里插播一種全局性(這個詞似乎不太對)的清除浮動的偽元素方法.

  .clearfix:after {content: '.';height: 0; overflow: hidden; clear: both; display: block; visibility: hidden; } .clearfix { zoom: 1; <!--hack--> }

  看起來有點小復雜啊，這里不分析這種方法的原理，記住就好了。當然你也可以直接借助觸發BFC的方式來解決（偷偷告訴你，常用的方式就是給你的父元素設置overflow: hidden;啦）。

哦+語氣~好像跑偏了，說好的布局呢，見下訴代碼：

#left{float: left;width: 100px; } #right{ margin-left: 120px; }

• 方式二：float+overflow的方式

這就是傳說中利用BFC的規則來實現兩列布局啊啊啊！

這種方式直接不需要清除浮動什么的就可以了，也不會影響前后文，用起來比較爽丫。

#left{float: left;width: 100px;margin-right: 20px; <!--好歹留個空啊嘿嘿--> } #right{overflow: hidden; }

• 方式三：float+margin+position的方式

這個方式呢也用到過，但是要考慮的比較多一點，不過其實也還好。
接下來請看實現代碼：

#parent{position: relative; } #left{float: left;width: 100px; background-color: #ccc; } #right{ position: absolute; top: 0; left: 120px; background-color:pink; }

這種方式實現起來很簡單，但是對后文是有影響的，需要自己解決一下，懶小花就不寫啦~

• 方式四：flex方式

  這個呢，坑肯定是比較多的，建議用在小范圍的布局，當然某些時候用起來確實比較爽歪歪啦

  #parent{display: flex; } #left{width: 100px; margin-right: 20px; } #right{ flex: 1; }

• 其他的吧，我暫時還沒用到也沒寫到~網上一搜會有好多好多精講的。

4. 左邊自適應右邊固定

話說其實我就只寫了一種方法，我都有點不好意思放上來了，不管了，小花的臉皮比較厚，不怕！

• 方式一： 當然還是position
  反正很多情況都可以用position來解決，但是，同時也會有一些其他問題出現，所以，自行思考用不用~ #parent {position: relative; } #left {margin-right:220px; } #right { position: absolute; right:0; top:0; width: 200px; }

5. 兩邊固定中間自適應的三列布局

其實這個布局用的也挺多的啊哈，嗯，昨天寫的作業就是這個！

• 方式一：純float方式

  注意：

• 左側元素與右側元素優先渲染，分別向左和向右浮動
• 中間元素在文檔流的最后渲染，自動插入到左右兩列元素的中間，隨后設置 margin 左右邊距分別為左右兩列的寬度，將中間元素調整到正確的位置。

.left{float: left;width: 200px;height: 200px; } .right{ float: right; width: 100px; height: 100px; } .middle{ margin:0 120px 0 220px; }

但凡用float的時候都要想一下父元素上清除浮動這個問題！

• 方式二：position的絕對定位

  其實感覺跟float的原理差不多，都是將左右兩側的塊先固定好，再對中間部分進行處理，只不過自己可以在不同情況下選擇float或者position。

.parent{position: relative; } .left{position: absolute;width: 200px; height: 200px; top: 0; left: 0; } .right{ position: absolute; top: 0; right: 0; width: 100px; height: 100px; } .middle{ margin:0 120px 0 220px; }

• 方式三：flex的彈性布局

不得不說的是其實很多布局都可以用flex來實現(簡單粗暴嘿嘿)，但是flex的兼容性不是很好，并且還有別問題，所以保險起見還是選擇常用的，這里簡單介紹下。

.parent{display: flex; } .left{width: 200px; height: 200px; } .right{ width: 100px; height: 100px; } .middle{ flex: 1; margin:0 20px; }

• 方式四：最后該淘寶的雙翼布局閃亮登場了

轉載于:https://www.cnblogs.com/hehong/p/6492907.html

總結

以上是生活随笔為你收集整理的水平+垂直布局-css （借鉴）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。