CSS：修訂版本之間的差異

出自六年制學程
跳轉到： 導覽、 搜尋
（→‎特殊字元）
第 1 行： 第 1 行：
 
[[分類:HTML]]
 
[[分類:HTML]]
 
Cascading Style Sheets(串接樣式表)
 
Cascading Style Sheets(串接樣式表)
 +
==選擇器==
 +
<table class=nicetable>
 +
<tr>
 +
<th>選擇器</th>
 +
<th>例子</th>
 +
<th>例子描述</th>
 +
<th style='width:5%;'>CSS</th>
 +
</tr>
 +
<tr>
 +
<td>.<i>class</i></td>
 +
<td>.intro</td>
 +
<td>選擇 class='intro' 的所有元素。</td>
 +
<td>1</td>
 +
</tr>
 +
<tr>
 +
<td>#<i>id</i></td>
 +
<td>#firstname</td>
 +
<td>選擇 id='firstname' 的所有元素。</td>
 +
<td>1</td>
 +
</tr>
 +
<tr>
 +
<td>*</td>
 +
<td>*</td>
 +
<td>選擇所有元素。</td>
 +
<td>2</td>
 +
</tr>
 +
<tr>
 +
<td><i>element</i></td>
 +
<td>p</td>
 +
<td>選擇所有 &lt;p&gt; 元素。</td>
 +
<td>1</td>
 +
</tr>
 +
<tr>
 +
<td><i>element</i>,<i>element</i></td>
 +
<td>div,p</td>
 +
<td>選擇所有 &lt;div&gt; 元素和所有 &lt;p&gt; 元素。</td>
 +
<td>1</td>
 +
</tr>
 +
<tr>
 +
<td><i>element</i> <i>element</i></td>
 +
<td>div p</td>
 +
<td>選擇 &lt;div&gt; 元素內部的所有 &lt;p&gt; 元素。</td>
 +
<td>1</td>
 +
</tr>
 +
<tr>
 +
<td><i>element</i>&gt;<i>element</i></td>
 +
<td>div&gt;p</td>
 +
<td>選擇父元素為 &lt;div&gt; 元素的所有 &lt;p&gt; 元素。</td>
 +
<td>2</td>
 +
</tr>
 +
<tr>
 +
<td><i>element</i>+<i>element</i></td>
 +
<td>div+p</td>
 +
<td>選擇緊接在 &lt;div&gt; 元素之後的所有 &lt;p&gt; 元素。</td>
 +
<td>2</td>
 +
</tr>
 +
<tr>
 +
<td>[<i>attribute</i>]</td>
 +
<td>[target]</td>
 +
<td>選擇帶有 target 屬性所有元素。</td>
 +
<td>2</td>
 +
</tr>
 +
<tr>
 +
<td>[<i>attribute</i>=<i>value</i>]</td>
 +
<td>[target=_blank]</td>
 +
<td>選擇 target='_blank' 的所有元素。</td>
 +
<td>2</td>
 +
</tr>
 +
<tr>
 +
<td>[<i>attribute</i>~=<i>value</i>]</td>
 +
<td>[title~=flower]</td>
 +
<td>選擇 title 屬性包含單詞 'flower' 的所有元素。</td>
 +
<td>2</td>
 +
</tr>
 +
<tr>
 +
<td>[<i>attribute</i>|=<i>value</i>]</td>
 +
<td>[lang|=en]</td>
 +
<td>選擇 lang 屬性值以 'en' 開頭的所有元素。</td>
 +
<td>2</td>
 +
</tr>
 +
<tr>
 +
<td>:link</td>
 +
<td>a:link</td>
 +
<td>選擇所有未被訪問的鏈接。</td>
 +
<td>1</td>
 +
</tr>
 +
<tr>
 +
<td>:visited</td>
 +
<td>a:visited</td>
 +
<td>選擇所有已被訪問的鏈接。</td>
 +
<td>1</td>
 +
</tr>
 +
<tr>
 +
<td>:active</td>
 +
<td>a:active</td>
 +
<td>選擇活動鏈接。</td>
 +
<td>1</td>
 +
</tr>
 +
<tr>
 +
<td>:hover</td>
 +
<td>a:hover</td>
 +
<td>選擇鼠標指針位於其上的鏈接。</td>
 +
<td>1</td>
 +
</tr>
 +
<tr>
 +
<td>:focus</td>
 +
<td>input:focus</td>
 +
<td>選擇獲得焦點的 input 元素。</td>
 +
<td>2</td>
 +
</tr>
 +
<tr>
 +
<td>:first-letter</td>
 +
<td>p:first-letter</td>
 +
<td>選擇每個 &lt;p&gt; 元素的首字母。</td>
 +
<td>1</td>
 +
</tr>
 +
<tr>
 +
<td>:first-line</td>
 +
<td>p:first-line</td>
 +
<td>選擇每個 &lt;p&gt; 元素的首行。</td>
 +
<td>1</td>
 +
</tr>
 +
<tr>
 +
<td>:first-child</td>
 +
<td>p:first-child</td>
 +
<td>選擇屬於父元素的第一個子元素的每個 &lt;p&gt; 元素。</td>
 +
<td>2</td>
 +
</tr>
 +
<tr>
 +
<td>:before</td>
 +
<td>p:before</td>
 +
<td>在每個 &lt;p&gt; 元素的內容之前插入內容。</td>
 +
<td>2</td>
 +
</tr>
 +
<tr>
 +
<td>:after</td>
 +
<td>p:after</td>
 +
<td>在每個 &lt;p&gt; 元素的內容之後插入內容。</td>
 +
<td>2</td>
 +
</tr>
 +
<tr>
 +
<td>:lang(<i>language</i>)</td>
 +
<td>p:lang(it)</td>
 +
<td>選擇帶有以 'it' 開頭的 lang 屬性值的每個 &lt;p&gt; 元素。</td>
 +
<td>2</td>
 +
</tr>
 +
<tr>
 +
<td><i>element1</i>~<i>element2</i></td>
 +
<td>p~ul</td>
 +
<td>選擇前面有 &lt;p&gt; 元素的每個 &lt;ul&gt; 元素。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>[<i>attribute</i>^=<i>value</i>]</td>
 +
<td>a[src^='https']</td>
 +
<td>選擇其 src 屬性值以 'https' 開頭的每個 &lt;a&gt; 元素。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>[<i>attribute</i>$=<i>value</i>]</td>
 +
<td>a[src$='.pdf']</td>
 +
<td>選擇其 src 屬性以 '.pdf' 結尾的所有 &lt;a&gt; 元素。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>[<i>attribute</i>*=<i>value</i>]</td>
 +
<td>a[src*='abc']</td>
 +
<td>選擇其 src 屬性中包含 'abc' 子串的每個 &lt;a&gt; 元素。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>:first-of-type</td>
 +
<td>p:first-of-type</td>
 +
<td>選擇屬於其父元素的首個 &lt;p&gt; 元素的每個 &lt;p&gt; 元素。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>:last-of-type</td>
 +
<td>p:last-of-type</td>
 +
<td>選擇屬於其父元素的最後 &lt;p&gt; 元素的每個 &lt;p&gt; 元素。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>:only-of-type</td>
 +
<td>p:only-of-type</td>
 +
<td>選擇屬於其父元素唯一的 &lt;p&gt; 元素的每個 &lt;p&gt; 元素。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>:only-child</td>
 +
<td>p:only-child</td>
 +
<td>選擇屬於其父元素的唯一子元素的每個 &lt;p&gt; 元素。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>:nth-child(<i>n</i>)</td>
 +
<td>p:nth-child(2)</td>
 +
<td>選擇屬於其父元素的第二個子元素的每個 &lt;p&gt; 元素。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>:nth-last-child(<i>n</i>)</td>
 +
<td>p:nth-last-child(2)</td>
 +
<td>同上，從最後一個子元素開始計數。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>:nth-of-type(<i>n</i>)</td>
 +
<td>p:nth-of-type(2)</td>
 +
<td>選擇屬於其父元素第二個 &lt;p&gt; 元素的每個 &lt;p&gt; 元素。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>:nth-last-of-type(<i>n</i>)</td>
 +
<td>p:nth-last-of-type(2)</td>
 +
<td>同上，但是從最後一個子元素開始計數。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>:last-child</td>
 +
<td>p:last-child</td>
 +
<td>選擇屬於其父元素最後一個子元素每個 &lt;p&gt; 元素。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>:root</td>
 +
<td>:root</td>
 +
<td>選擇文檔的根元素。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>:empty</td>
 +
<td>p:empty</td>
 +
<td>選擇沒有子元素的每個 &lt;p&gt; 元素（包括文本節點）。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>:target</td>
 +
<td>#news:target</td>
 +
<td>選擇當前活動的 #news 元素。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>:enabled</td>
 +
<td>input:enabled</td>
 +
<td>選擇每個啟用的 &lt;input&gt; 元素。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>:disabled</td>
 +
<td>input:disabled</td>
 +
<td>選擇每個禁用的 &lt;input&gt; 元素</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>:checked</td>
 +
<td>input:checked</td>
 +
<td>選擇每個被選中的 &lt;input&gt; 元素。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>:not(<i>selector</i>)</td>
 +
<td>:not(p)</td>
 +
<td>選擇非 &lt;p&gt; 元素的每個元素。</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td>::selection</td>
 +
<td>::selection</td>
 +
<td>選擇被用戶選取的元素部分。</td>
 +
<td>3</td>
 +
</tr>
 +
</table>
 +
 
==語法==
 
==語法==
 
===特殊字元===
 
===特殊字元===

2019年1月29日 (二) 17:44的修訂版本

Cascading Style Sheets(串接樣式表)

選擇器

選擇器 例子 例子描述 CSS
.class .intro 選擇 class='intro' 的所有元素。 1
#id #firstname 選擇 id='firstname' 的所有元素。 1
* * 選擇所有元素。 2
element p 選擇所有 <p> 元素。 1
element,element div,p 選擇所有 <div> 元素和所有 <p> 元素。 1
element element div p 選擇 <div> 元素內部的所有 <p> 元素。 1
element>element div>p 選擇父元素為 <div> 元素的所有 <p> 元素。 2
element+element div+p 選擇緊接在 <div> 元素之後的所有 <p> 元素。 2
[attribute] [target] 選擇帶有 target 屬性所有元素。 2
[attribute=value] [target=_blank] 選擇 target='_blank' 的所有元素。 2
[attribute~=value] [title~=flower] 選擇 title 屬性包含單詞 'flower' 的所有元素。 2
[attribute|=value] [lang|=en] 選擇 lang 屬性值以 'en' 開頭的所有元素。 2
:link a:link 選擇所有未被訪問的鏈接。 1
:visited a:visited 選擇所有已被訪問的鏈接。 1
:active a:active 選擇活動鏈接。 1
:hover a:hover 選擇鼠標指針位於其上的鏈接。 1
:focus input:focus 選擇獲得焦點的 input 元素。 2
:first-letter p:first-letter 選擇每個 <p> 元素的首字母。 1
:first-line p:first-line 選擇每個 <p> 元素的首行。 1
:first-child p:first-child 選擇屬於父元素的第一個子元素的每個 <p> 元素。 2
:before p:before 在每個 <p> 元素的內容之前插入內容。 2
:after p:after 在每個 <p> 元素的內容之後插入內容。 2
:lang(language) p:lang(it) 選擇帶有以 'it' 開頭的 lang 屬性值的每個 <p> 元素。 2
element1~element2 p~ul 選擇前面有 <p> 元素的每個 <ul> 元素。 3
[attribute^=value] a[src^='https'] 選擇其 src 屬性值以 'https' 開頭的每個 <a> 元素。 3
[attribute$=value] a[src$='.pdf'] 選擇其 src 屬性以 '.pdf' 結尾的所有 <a> 元素。 3
[attribute*=value] a[src*='abc'] 選擇其 src 屬性中包含 'abc' 子串的每個 <a> 元素。 3
:first-of-type p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。 3
:last-of-type p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。 3
:only-of-type p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。 3
:only-child p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素。 3
:nth-child(n) p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。 3
:nth-last-child(n) p:nth-last-child(2) 同上，從最後一個子元素開始計數。 3
:nth-of-type(n) p:nth-of-type(2) 選擇屬於其父元素第二個 <p> 元素的每個 <p> 元素。 3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是從最後一個子元素開始計數。 3
:last-child p:last-child 選擇屬於其父元素最後一個子元素每個 <p> 元素。 3
:root :root 選擇文檔的根元素。 3
:empty p:empty 選擇沒有子元素的每個 <p> 元素（包括文本節點）。 3
:target #news:target 選擇當前活動的 #news 元素。 3
:enabled input:enabled 選擇每個啟用的 <input> 元素。 3
:disabled input:disabled 選擇每個禁用的 <input> 元素 3
:checked input:checked 選擇每個被選中的 <input> 元素。 3
:not(selector) :not(p) 選擇非 <p> 元素的每個元素。 3
::selection ::selection 選擇被用戶選取的元素部分。 3

語法

特殊字元

編碼 不換行 用於 URL HTML 名稱 區域 顯示
U+0020
(32)		 空格 基本拉丁 ] [
普通半形空格，同 ASCII 字元 0x20
U+00A0
(160)		 ✓ &nbsp; 不換行空格(No-Break Space) Latin-1 Supplement ] [
同 U+0020，但不換行
U+2002
(8194)		 &ensp; En 空格(En Space)或 Nut 一般標點 ] [
與 en 同寬(em之一半)。
U+2003 &emsp; Em 空格(Em Space)或 Mutton 一般標點 ] [
與 em 同寬。
U+2004 Em 三分之一空格(Three-Per-Em Space)或 Thick Space 一般標點 ] [
em 之三分之一寬
U+2005 Em 四分之一空格(Four-Per-Em Space)或 Mid Space 一般標點 ] [
em 之四分之一寬
U+2006 Em 六分之一空格(Six-Per-Em Space) 一般標點 ] [
em 之六分之一寬。電腦字型有時與 U+2009 等同。
U+2007 ✓ 數字空格(Figure Space) 一般標點 ] [
用於分隔數字之定位符，與單一數字同寬
U+2008 標點穴格 一般標點 ] [
與同字型之窄標點同寬，即句號或逗號(西方語文)之寬度
U+2009 &thinsp; 窄空格(Thin Space) 一般標點 ] [
em 之六分之一(有時設計成五分之一)寬。建議用作 SI 單位數字之千位分隔符。與 U+2002 至 U+2008 不同，其寬可根據排版調整
U+200A 髮寬空格(Hair Space) 一般標點 ] [
窄於窄空格(thin space)
U+200B 零寬空格(Zero Width Space，簡稱「ZWSP」) 一般標點 ]​[
U+200C ✓ &zwnj; 零寬不連字(Zero Width Non Joiner，簡稱「ZWNJ」) 一般標點 ]‌[
U+200D ✓ &zwj; 零寬連字(Zero Width Joiner，簡稱「ZWJ」) 一般標點 ]‍[
U+202F ✓ 窄式不換行空格(Narrow No-Break Space) 一般標點 ] [
U+205F 中數學空格(Medium Mathematical Space，簡稱「MMSP」) 一般標點 ] [
用於數學方程式。em 之 18 分之 4 寬在數學排版領域，空格寬度通常以十八份之幾的方式給定；4/18 em 可用於數個情況，例如數式 a + b 中 a 與 + 及 + 與 b 之間
U+2060 ✓ ✓ 文字連接符(Word Joiner) 一般標點 ]⁠[
同 U+200B，但該處不能換行。Unicode 3.2 新增，以代替 U+FEFF 字元廢止之零寬不換行空格功能
U+3000
(12288)		 表意文字空格 CJK 符號及標點 ]　[
與 CJK 文字同寬(全形)
U+FEFF ✓ ✓ 零寬不換行空格(Zero Width No-Break Space) = 位元組順序記號(Byte Order Mark，簡稱「BOM」) Arabic Presentation Forms-B ][
主要用作位元組次序標記字元。原來之不換行指示功能於 Unicode 3.2 起廢止，代之以 U+2060。
  1. 空格：
    • &#32;：十六進制20
    • &nbsp;：不換行空格(No-Break Space)，值160(十六進制A0)
  2. &#9;：TAB，只在<PRE>...</PRE>之間有效
  3. &#10;：換行，只在<PRE>...</PRE>之間有效

顏色

(一)十六進位顏色

這是最常用的一種顏色表現形式。十六進位顏色值的規定格式是： 

#RRGGBB

RR表示紅色；GG表示綠色；BB表示藍色。它們的取值範圍都介於00～FF之間。

例如：

  1. 紅色的十六進位顏色表現形式為：#FF0000
    RR為FF，GG為00，BB為00。
  2. 綠色的十六進位顏色表現形式為：#00FF00
    RR為00，GG為FF，BB為00。
  3. 藍色的十六進位顏色表現形式為：#0000FF
    RR為00，GG為00，BB為FF。

(二)RGB顏色

RGB顏色值的規定格式是： 

RGB(x,x,x)

第一個x表示紅色；第二個x表示綠色；第三個x表示藍色。它們都可以定義為0～255之間的整數，或者百分比為0%～100%之間的整數。

例如：

  1. 紅色的RGB顏色值的表現形式為：RGB(255,0,0) 或者 RGB(100%,0%,0%)
  2. 綠色的RGB顏色值的表現形式為：RGB(0,255,0) 或者 RGB(0%,100%,0%)
  3. 藍色的RGB顏色值的表現形式為：RGB(0,0,255) 或者 RGB(0%,0%,100%)

(三)基本色

ColorColor NameHEXRGB
 black#0000000,0,0
 silver#C0C0C0192,192,192
 gray#808080128,128,128
 white#FFFFFF255,255,255
 maroon#800000128,0,0
 red#FF0000255,0,0
 purple#800080128,0,128
 fuchsia#FF00FF255,0,255
 green#0080000,128,0
 lime#00FF000,255,0
 olive#808000128,128,0
 yellow#FFFF00255,255,0
 navy#0000800,0,128
 blue#0000FF0,0,255
 teal#0080800,128,128
 aqua#00FFFF0,255,255

(四)系統色(CSS3後不建議再使用)

ColorColor Name
 activeborder
 activecaption
 appworkspace
 background
 buttonface
 buttonhighlight
 buttonshadow
 buttontext
 captiontext
 graytext
 highlight
 highlighttext
 inactiveborder
 inactivecaption
 inactivecaptiontext
 infobackground
 infotext
 menu
 menutext
 scrollbar
 threeddarkshadow
 threedface
 threedhighlight
 threedlightshadow
 threedshadow
 window
 windowframe
 windowtext

表格(table)

display

  • display:block：區塊，元素會以區塊方式呈現，除非設定 position 或 float。
    1. 可以設定高度(height)、寬度(width)、上方與下方距離
    2. div、p、ul、li 均屬 block。
  • display:inline：所有文字或圖片均不換行，也就是全部都會是同一行的意思。
    1. 高度與寬度都不能設定，文字或圖片所佔的寬度就是他的寬度
    2. span、a、input、img、em 均屬 inline。
  • display:table-cell：假裝表格，其中的子元素可以輕易垂直置中

範例一：

  1. <div style= 'display:block'>元素一</div>
    <div style= 'display:block'>元素二</div>
  2. 元素一
    元素二

範例二：

  1. <div style= 'display:inline'>元素一</div>
    <div style= 'display:inline'>元素二</div>
  2. 元素一
    元素二

水平置中

  1. 母元素 text-align:center 子元素的 display 為 inline、inline-block
  2. 母子元素均為 block ，第一個子元素設 float:left;margin-left:calc(50% - 適當值px); ，calc()中的減號前後都要有空白

垂直置中

(一)設定行高 ( line-height )

適用於子元素「單行」的「行內元素」( inline、inline-block )，例如單行的標題，或是已經設為 inline-block 屬性的 div。若將母元素的 line-height 設成和高度一樣的數值，則母元素內部的行內元素就會被垂直置中。因為是行高，所以會在行內元素的上下都加上行高的 1/2 ，所以就垂直置中了！不過由此就可以看出，為什麼必須要單行的行內元素，因為如果多行，第二行與第一行的間距會變超大，就不是我們所期望的效果了。

範例一：Div設 height 、 line-height 設同值，文字自然會垂直置中

  1. <DIV style='width:200px;height:100px;line-height:100px;background:#CF9;text-align:center;'>
    測試文字垂直置中
    </DIV>
  2. 測試文字垂直置中

範例二：外層 Div 的 height 、 line-height 設不同值，並不會置中

  1. <Div style='width:200px;height:100px;line-height:150px;border:1px solid #000;text-align:center;'>
    <div style='display:inline-block;width:30px;height:30px;background:#c00;'></div>
    </Div>

(二)vertical-align

vertical-align 垂直方向的對齊，用於「圖照」或「表格欄位內的文字」垂直對齊效果，諸參數：

  1. baseline：基礎線，約在文字的中間位置
  2. sub：下標
  3. super：上標
  4. top：該行元素的最高處
  5. text-top：該行文字的最高處
  6. middle：置中
  7. bottom：該行元素的最低處
  8. text-bottom：該行文字的最低處
  9. 百分比(%)：以百分比來讓圖片垂直對齊該行文字，可以有負值

vertical-align:middle 雖然是垂直置中，不過卻是指在外框內的所有元素垂直位置互相置中，並不是相對於外框的高度垂直置中。

  1. <Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'>
    <div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'></div>
    <div style='width:30px;height:60px;background:#0c0;display:inline-block;vertical-align:middle;'></div>
    <div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'></div>
    </Div>

如果有一個方塊變成了高度 100%，那麼其他的方塊就會真正的垂直置中。

  1. <Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'>
    <div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'></div>
    <div style='width:30px;height:100%;background:#0c0;display:inline-block;vertical-align:middle;'></div>
    <div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'></div>
    </Div>

但是：

  1. 我們總不能每次要垂直置中，都要添加一個奇怪的 div 在裏頭
  2. 所以我們就使用「偽元素」 ::before 和 ::after 添加 div 進到框框內，
  3. 讓這個「偽」div的高度 100% 就可以輕鬆地讓其他的 div 都置中。
  4. 偽 div 的 display 須為 inline-block，畢竟 vertical-align:middle; 是針對行內元素

依上述要領實作如下，添置偽元素 ::before ：

  1. .div0::before{
    width:0;content:'';
    vertical-align:middle;height:100%;
    display:inline-block;position:relative;
    }

(三)動態計算

不是處處都能用 inline-block，block也可使用 top 樣式來垂直置中，其值為 calc(50% - 半高px)：

  1. calc 為動態計算，50% 代表母元素高度之半，「-」是減號，前後都必須是空白，再減去自身高度之半。
  2. 自身元素的 position 必須為 relative，不然 top 失去作用
  3. 只能用 top 不能用 margin-top ，因為 margin-top 的 50% 代表的是母元素的寬度之半。
  4. float:left;是各相鄰區塊向左漂移靠攏；第一個區塊取適當的左距。

依以上要領實作如下：

  1. <Div style='width:200px;height:100px;border:1px solid #000;'>
    <div style='width:30px;height:30px;background:#c00;position:relative;top:calc(50% - 15px);float:left;margin-left:calc(50% - 45px);'></div>
    <div style='width:30px;height:60px;background:#0c0;position:relative;top:calc(50% - 30px);float:left;'></div>
    <div style='width:30px;height:40px;background:#00f;position:relative;top:calc(50% - 20px);float:left;'></div>
    </Div>

(四)假裝表格

td 中下一行 vertical-align:middle 就可以垂直置中，而其 display 樣式是 table-cell 。所以我們只要將母元素設為 display:table-cell;vertical-align:middle; ，其子元素就會置中。

  1. <Div style='width:200px;height:100px;display:table-cell;vertical-align:middle;border:1px solid #000;text-align:center;'>
    假表格垂直置中
    </Div>
  2. 假表格垂直置中

(五)margin:auto

母元素設 position:relative; ，子元素設 position:absolute;margin:auto;自動置中 

  1. <Div style='position:relative;width:200px;height:100px;border:1px solid #000;'>
	<div style='position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;width:100px;height:50px;background:#f60;'></div>
</Div>

(六)垂直位移 CSS3

CSS3可以使用transform樣式，對子元素做如下操作：

  1. 用 top:50%; 下降母元素的 50% 。
  2. 用 transform:translateY(-50%) 上升子元素的 50% ， transform 管位移、旋轉、變形， translateY 為垂直位移
  3. position:relative

依以上要領實作如下：

  1. <Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'>
    <div style='top:50%;transform:translateY(-50%);position:relative;width:100px;height:50px;background:#095;display:inline-block;'></div>
    </Div>

(七)flexbox CSS3

display 設 flex、垂直 align-items 設 center、水平 justify-content 設 center：

  1. <Div style='display:flex;align-items:center;justify-content:center;width:200px;height:100px;border:1px solid #000;'>
    <div style='width:100px;height:50px;background:#099;'></div>
    </Div>
取自「http://nice-learning.tw/wiki1231/index.php?title=CSS&oldid=47405」