網頁樣式表CSS的提示與竅門
See also the index of all tips.
居中文檔
一個CSS通常的目的是用其來居中文稿和圖片. 實際上, 有三種居中的類型::
最近執行CCS，您可以用Level 3的功能去容許絕對居中定位元素:
居中文稿的字句
在段落或者標題中的文稿內居中字句是最常見和(因此)最簡單的。CSS對此有'text-align'的功能:
P { text-align: center }
H2 { text-align: center }
表示在P中或者在H2中每一行都是在邊距內居中排列的, 就像這樣:
在這段中的字句都是在段落的邊距內居中的, 感謝CSS的"
text-align"功能中的'center'參數.
居中文字區塊或圖片
有時侯並不是文稿需要居中排列, 而是文字區塊作為一個整體. 或者, 用不同的方式表 達: 我們要求左右的邊距是對等的.
這樣做的方法就是把邊距設定為'auto'.這通常都是運用在文字區塊的固定的寬度上, 因為如果文字區塊本身是靈活的,
它就會完全的佔用所有的可用的寬度. 以下是一個例子:
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 6em
}
...
<P class="blocktext">This rather...
這個有點窄的文字區塊中的版塊就居中了. 但注意文字區塊中的字句是沒有居中的
(他們是向左對齊的), 不像先前的例子.
這也是用來居中圖片的方法: 把它本身設定為一個版塊, 再對它施用邊距設定功能.例如:
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">
以下的圖片是居中排列的. 
垂直居中
CSS level 2 不具備垂直居中文檔的能力.在CSS level 3可能會具備這種功能 (請見 下麵).但是即使在CSS2內也可以通過結合一些特性來垂直居中文段. 訣竅是把週邊版塊具體指定格式化為單元表格格式,,
,因為單元表格格式.可以 被垂直居中.
下面的例子是在一個指定高度的文段中居中其中的一個段落。另外一個例子則是指出一個段落之所以可以在流覽器視窗中垂直居中, 是因為它是在一個已經完全被定位和與視窗有同樣高度的文段內.
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>This small paragraph...
</DIV>
CSS level 3垂直集中
CSS level 3提供其他可能性。這個時候 (2014), 能夠不使用絕對居中定位(可能引起文字重疊)地
垂直居中文段的方法還是有待討論但如果您知道文字重疊不會是一個問題的話，您可以用"轉變"屬性去把絕對定位元素居中。例如：
This paragraph is vertically centered.
像這樣的檔:
<div class=container3>
<p>This paragraph...
</div>
像這樣的樣式單:
div.container3 {
height: 10em;
position: relative } /* 1 */
div.container3 p {
margin: 0;
position: absolute; /* 2 */
top: 50%; /* 3 */
transform: translate(0, -50%) } /* 4 */
它的基本規則是:
- 使容器 相對定位, 標明它是絕對定位元素的容器
- 使容器自己絕對定位.
- 把它放到容器的中間的"最高:50%".(注意這裡的50%是容器高度的50%)
- 使用翻譯將元素向上移動其自身高度的一半(翻譯的50% (0, -50%)'指元件本身的高度).)
最近 (大概從2015年起), 另一種技術已經可以在幾種CSS執行使用。它是基於'display'屬性的'flex'關鍵字。
這個關鍵字是為了用於圖形化使用者介面，但當文檔碰巧有正確的結構，沒有什麼能阻止你在文檔使用。
像這樣的樣式單
div.container5 {
height: 10em;
display: flex;
align-items: center }
div.container5 p {
margin: 0 }
CSS level 3垂直及水準集中
我們可以同時將這兩種方法擴展到水準及垂直居中
把段落弄成絕對定位的副作用是它只能夠是它需要的寬度(當然除非我們給他一個特定的寬度).下面的例子正是我們想要的：
我們把只有一個字的段落居中("已居中！"), 所以段落的寬度跟那一個字的寬度是應該一模一樣的。
黃色的背景是代表該段落確實只有跟內容一樣寬。我們假設與以前相同的標記:
<div class=container4>
<p>Centered!
</div>
樣式表在垂直居中方面跟先前的示例是相似的。可是我們現在把元素移到容器的中間，'left: 50%',然後同時在
'translate'轉換時將它向左移動自己寬度的一半：
div.container4 {
height: 10em;
position: relative }
div.container4 p {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
下一個例子解釋了需要 'margin-right: -50%'的原因
當CSS formatter 支持'flex', 便更容易
與此樣式表:
div.container6 {
height: 10em;
display: flex;
align-items: center;
justify-content: center }
div.container6 p {
margin: 0 }
就是,唯一的補充是'justify-content: center'. 就像'align-items'確定垂直對齊
容器的內容， 'justify-content' 確認水準對齊. (它們實際上跟它們的名字一樣是比較複雜，
只是以簡單的角度看它們就是這樣運作的) 其中一個'flex'的副作用是它的子元素, 在這情況下的P, 是會自動盡可能做得小。
CSS level 3 視口居中
絕對定位元素的預設容器就是視口(如果是流覽器的話，則是指流覽器窗口). 所以，把在視口的元素居中是很簡單的。
這裡是一個完整的例子. (此示例用了HTML5語法)
<html>
<style>
body {
background: white }
section {
background: black;
color: white;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
</style>
<section>
<h1>Nicely centered</h1>
<p>This text block is vertically centered.
<p>Horizontally, too, if the window is wide enough.
</section>
你可以在 另外一個檔看到結果
'margin-right: -50%'需要補償 'left:50%'. 規則'left'減少50%可用寬度元素。因此，
渲染器將嘗試使文句不超過容器寬度的一半。這樣說，元素的右邊距離與右邊有相同量地變得更接近，最大行長度跟容器的寬度相同。
嘗試重新調教視窗大小: 你會看到如果視窗的寬度足夠的話，每個句子會出現在每一行上。只有當視窗太窄，整個句子才會
分成幾行。當您去掉'margin-right: -50%'及再重新調教視窗大小，雖然
視窗仍然比文字寬兩倍，但您會看到那些句子已經分開了。
(利用 'translate' 來作視口居中是首先被"Charlie"在堆疊溢位的答案.)裡提出
