如何實現兩欄布局,三欄布局,水平垂直居中

先寫一下樣式

"box">
"left">左
"right">右

使用float + margin方式實現

還可以使用position實現

div .left .right

也可以使用flex實現

div .box .left .right

先寫樣式

"box">
"left">左
"right">右
"center">中

使用float + margin方式實現

div .center .left .right

使用position實現

div .center .left .right

使用flex布局

.box .left .right .center

聖杯布局

三列布局，左列和右列都是固定寬度，中間自適應

232     33         "main">
34 
35 "middle">
36 "content">
37 middle-content
38 
39 
40 "left">left
41 
42 "right">right
43 
44 
45

雙飛翼布局

三欄布局，兩邊的盒子寬度固定，中間盒子自適應

"header">#header
"container">
"center" class="column">
"content">#center
"left" class="column">#left
"right" class="column">#right
"footer">#footer

雙飛翼布局和聖杯布局的區別:

聖杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div併排，以形成三欄布局。不同的地方在於解決中間div內容不被遮擋的思路上面:

1.聖杯布局的為了中間內容不被修改，是通過包裹元素的padding-left和padding-right來使得內容div置於中間，然後再通過相對定位position :relative，配合right或left屬性讓左右兩欄不遮擋中間內容。

2.雙飛翼布局的解決方案是：通過在中間元素的內部新增乙個div用於放置內容，然後通過左右外邊距margin-left和margin-right為左右兩欄留出位置。

position + margin實現

flex實現

通過text-align: center 實現;

前提是看它的父元素是不是塊級元素，如果是，則直接給父元素設定 text-align: center;

1111

如果不是，則先將其父元素設定為塊級元素，再給父元素設定 text-align: center;

.box .box1

可以使用margin: 0 auto實現

#father #son .box1

使用flexbox布局

.box .box1

如何實現兩欄布局,三欄布局,水平 垂直居中