css實現左右布局和居中布局顯示是前端進行頁面設計的基礎，也是全面了解并學習css一個很好的切入點，因為其中會涉及到對許多css基礎點的認知。實現css入門，理解左右布局的實現方式是必經之路，同時也能使我們在項目中涉及前端編碼的部分受益。

1.左右布局

1)使用inline-block進行左右布局

display:inline-block屬性是介于行級元素(display:inline)和塊級元素(display：block)之間的屬性，它可以像行級元素一樣水平布局，也可以像塊級元素設置寬高屬性，所以使用它可以進行左右布局。

代碼：

效果：

2）使用float實現左右布局

float屬性是css中關于布局的一個關鍵屬性，其意為將該塊狀區域脫離父級標簽的文檔流，left屬性值使該區域向父級標簽區域的左側邊界放置，right屬性值使該區域塊向父級標簽的右側邊界放置，如是利用該屬性可以實現左右布局。請注意添加float屬性后，需要給父級清除浮動，以避免浮動帶來的影響。

代碼：

效果：

2.左中右布局

左中右布局與左右布局類似，多加了一個div而已。

代碼：

效果：

3.居中

1）使用margin：0 auto實現水平居中

具體來說就是把要居中的元素的margin-left和margin-right都設為auto，此方法只能進行水平的居中，且對浮動元素或絕對定位元素無效。注意居中的元素需要有寬度。

代碼：

效果：

2）使用 text-align:center

這個沒什么好說的，只能對圖片，按鈕，文字等行內元素(display為inline或inline-block等)進行水平居中。當然行內元素還是塊級元素都是可以用CSS再設置的。

代碼：

效果：

3）使用line-height讓單行的文字垂直居中

把文字的line-height設為文字父容器的高度，適用于只有一行文字的情況

代碼：

效果：

4）使用定位來進行水平垂直居中

此法只適用于那些我們已經知道它們的寬度或高度的元素

代碼：

效果：

總結

以上是生活随笔為你收集整理的按钮自动居中布局_CSS布局技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

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