左右/左中右布局

1. 浮動

給所有子元素添加float:left;,同時給父元素添加clearfix類,解決浮動出現的bug。
CSS:

HTML:

2. 行內塊

使用display: inline-block;使塊元素成為行內塊，此時會出現bug：下方出現一個空隙，一定要用vertical-align: top;來解決。

3. 絕對定位

為父元素設置position:relative;，為子元素設置position:absolute; 。如圖：

特定情況下使用浮動還是絕對定位:
1.使用浮動時：不需要計算特別精確的位置，不過不易操控，浮動元素的寬度需要注意，否則會換行展示，適用于導航欄等地方。
2.使用絕對定位：需要計算元素的具體位置，不過更加準確，易于操控。
3.當某些元素的位置要根據父元素的大小自適應，內容寬度無法確定時，建議使用浮動。
4.當特定元素的位置是相對父元素固定，或者內容寬高確定，需要精確定位甚至以后要用js操作變換位置時，建議使用浮動。

4. Flex布局

給父級加上 display: flex;定義其為flex容器，使用flex-direction: row;使主軸水平；

HTML:

CSS:

布局的傳統解決方案，基于盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現。
2009年，W3C 提出了一種新的方案----Flex 布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。Flex 布局將成為未來布局的首選方案。

• 設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效;
• flex-direction屬性決定主軸的方向（即項目的排列方向）,它可能有4個值;
• row（默認值）：主軸為水平方向，起點在左端。
• row-reverse：主軸為水平方向，起點在右端。
• column：主軸為垂直方向，起點在上沿。
• column-reverse：主軸為垂直方向，起點在下沿。
• 更多flex語法:阮一峰博客--www.ruanyifeng.com/blog/2015/0…

---

水平居中

1.內聯元素水平居中：

將內聯元素外部的塊級元素的text-align設置為center,即可實現內聯元素(inline、inline-block)的水平居中。可設置內聯元素的行高line-height控制內聯元素所占高度。

2. 塊級元素水平居中：

將固定寬度的塊級元素的margin-left和margin-right設置成auto，即可實現元素的水平居中。

3. 多個塊級元素水平居中：

如圖中ol的布局問題，

block默認會擴展，使用display: inline-block;使其成為行內塊，默認收縮。此時會出現bug：下方出現一個空隙，一定要用vertical-align: top;來解決，結果如圖： 此時這是一個內聯元素，在父級中加入text-align: center;可以實現子元素水平居中。
CSS:

4.絕對定位

通過position:absolute;實現CSS水平居中。

5.flex布局

justify-content屬性定義了項目在主軸上的對齊方式；
使用justify-content:center;實現居中；

CSS:

• justify-content可能取5個值，具體對齊方式與軸的方向有關,下面假設主軸為從左到右。
• flex-start（默認值）：左對齊
• flex-end：右對齊
• center： 居中
• space-between：兩端對齊，項目之間的間隔都相等。
• space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

---

垂直居中

1.內聯元素垂直居中

設置內聯元素的行高(line-height)和內聯元素的父元素的高度(height)相等，且內聯元素的字體大小遠小于行高，即可使內聯元素垂直居中。

2.塊級元素垂直居中

• 固定高度的塊級元素： 通過絕對定位使元素距離頂部50%，并設置margin-top向上移元素高度的一半，實現垂直居中。
• 通過verticle-align:middle實現CSS垂直居中。(vertical生效的前提是元素的display：inline-block。)

3.flex布局

使用align-items:center;使子元素相對交叉軸的中點對齊（默認交叉軸從上到下）。

CSS:

• align-items屬性定義項目在交叉軸上如何對齊。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。
• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 項目的第一行文字的基線對齊。
• stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

轉載于:https://juejin.im/post/5cc5dccbf265da034e7e96fb

總結

以上是生活随笔為你收集整理的CSS布局问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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