水準 & 垂直居中對齊
元素居中對齊
要水準居中對齊一個元素(如
), 可以使用 margin: auto;。
設定到元素的寬度将防止它溢出到容器的邊緣。
元素通過指定寬度，并将兩邊的空外邊距平均配置設定：
div 元素是居中的
執行個體
.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }
注意: 如果沒有設定 width 屬性(或者設定 100%)，居中對齊将不起作用。
文本居中對齊
如果僅僅是為了文本在元素内居中對齊，可以使用 text-align: center;文本居中對齊
.center { text-align: center; border: 3px solid green; }
提示: 更多文本對齊執行個體，請參閱 css 文本 章節。
圖檔居中對齊
要讓圖檔居中對齊, 可以使用 margin: auto; 并将它放到 塊 元素中:
img { display: block; margin: auto; width: 40%; }
左右對齊 - 使用定位方式
我們可以使用 position: absolute; 屬性來對齊元素:
碼農教程 -- 學的不僅是技術，更是夢想!!!
.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73ad21; padding: 10px; }
注釋：絕對定位元素會被從正常流中删除，并且能夠交疊元素。
提示: 當使用 position 來對齊元素時, 通常 元素會設定 margin 和 padding 。 這樣可以避免在不同的浏覽器中出現可見的差異。
當使用 position 屬性時，ie8 以及更早的版本存在一個問題。如果容器元素(在我們的案例中是
)設定了指定的寬度，并且省略了 !doctype 聲明，那麼 ie8 以及更早的版本會在右側增加 17px 的外邊距。這似乎是為滾動條預留的空間。當使用 position 屬性時，請始終設定 !doctype 聲明：
body { margin: 0; padding: 0; } .container { position: relative; width: 100%; } .right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6; }
左右對齊 - 使用 float 方式
我們也可以使用 float 屬性來對齊元素:
.right { float: right; width: 300px; border: 3px solid #73ad21; padding: 10px; }
當像這樣對齊元素時，對 元素的外邊距和内邊距進行預定義是一個好主意。這樣可以避免在不同的浏覽器中出現可見的差異。
注意：如果子元素的高度大于父元素，且子元素設定了浮動，那麼子元素将溢出，這時候你可以使用 "clearfix(清除浮動)" 來解決該問題。
我們可以在父元素上添加 overflow: auto; 來解決子元素溢出的問題:
.clearfix { overflow: auto; }
當使用 float 屬性時，ie8 以及更早的版本存在一個問題。如果省略 !doctype 聲明，那麼 ie8 以及更早的版本會在右側增加 17px 的外邊距。這似乎是為滾動條預留的空間。當使用 float 屬性時，請始終設定 !doctype 聲明：
body { margin: 0; padding: 0; } .right { float: right; width: 300px; background-color: #b0e0e6; }
垂直居中對齊 - 使用 padding
css 中有很多方式可以實作垂直居中對齊。 一個簡單的方式就是頭部頂部使用 padding:
我是垂直居中。
.center { padding: 70px 0; border: 3px solid green; }
如果要水準和垂直都居中，可以使用 padding 和 text-align: center:
我是水準和垂直都居中的。
.center { padding: 70px 0; border: 3px solid green; text-align: center; }
垂直居中 - 使用 line-height
我是垂直居中的。
.center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } /* 如果文本有多行，添加以下代碼: */ .center p { line-height: 1.5; display: inline-block; vertical-align: middle; }
垂直居中 - 使用 position 和 transform
除了使用 padding 和 line-height 屬性外,我們還可以使用 transform 屬性來設定垂直居中:
.center { height: 200px; position: relative; border: 3px solid green; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
提示: 更多 transform 屬性内容可以參閱 2d 翻轉章節。