CSS 布局

左右布局

float

1. 子元素left添加float: left; 子元素right添加float: right;
2. 父元素添加class="clearfix" /*避免出現BUG*/
3. 添加.clearfix{content: ; /n display: block; /n clear: both;}
4. 父元素添加padding控制距離

<div id="main" class="clearfix"> <div id="left"></div> <div id="right"></div></div>#main { padding: ; height: 50px; width: 50%;}#left { float: left; height: 50px; width: 50%;}#right { float: right; height: 50px; width: 50%;}.clearfix { content: ; display: block; clear: both;}

左中右布局

position

1. 兩側添加position: absolute;
2. 設置兩側的top值都為0，設置左側欄的left值為0， 右側欄的right值為0。
3. 對中間設置左右外邊距，margin-left的值為左側欄的寬度，margin-right的值為右側欄的寬度。

<div id="left"></div><div id="right"></div><div id="center"></div>#left,#right{ position: absolute; top: 0;}#left { left: 0;}#right { right: 0;}#center { padding: ; height: 50px; width: 50%;

水平居中

方法一

內聯元素：

1. 父元素為塊級元素
2. 父元素添加text-align: center;

這種方法可以使inline/inline-block/inline-table/inline/flex等類型的元素實現居中。<div id="content"> <span>Content</span></div>#content { text-align: center;}

方法二

1. 元素設置固定的寬高
2. 添加margin-left: auto;和margin-right: auto;
3. 這種方法前提是已經為元素設置了適當的 width 寬度，否則塊級元素的寬度會被拉伸為父級容器的寬度。

<div id="content">Content</div>#content { margin-right: auto; margin-left: auto; height: 50px; width: 50%;}

垂直居中

方法一

1. 子元素設定固定寬高
2. 子元素設置position: absolute(fixed)
3. top;right;bottom;left;設置為0
4. 添加margin: auto;這種方法使用了一個 position:absolute，有固定寬度和高度的 div。這個 div 被設置為 top:0; bottom:0;。但是因為它有固定高度，其實並不能和上下都間距為 0，因此 margin:auto;會使它居中。使用 margin:auto;使塊級元素垂直居中是很簡單的

<div id="content">Content</div>#content { position: absolution; /*或fixed*/ top: 0; right: 0; bottom: 0; left: 0; margin: auto; height: 50px; width: 50%;}

方法二

1. 設置固定高度； /*可省略這部*/
2. 添加line-height，數值為高度的值

這種方法只能將單行文本置中。只需要簡單地把 line-height 設置為那個對象的 height 值就可以使文本居中了。

<span id="content">Content</span>#content { height: 50px; line-height: 50px;}

推薦閱讀：