CSS 教程
CSS 對(duì)齊
水平 & 垂直居中對(duì)齊
元素居中對(duì)齊
要水平居中對(duì)齊一個(gè)元素(如 <div>), 可以使用 margin: auto;。
設(shè)置到元素的寬度將防止它溢出到容器的邊緣。
元素通過指定寬度，并將兩邊的空外邊距平均分配：
div 元素是居中的
注意: 如果沒有設(shè)置 width 屬性(或者設(shè)置 100%)，居中對(duì)齊將不起作用。
文本居中對(duì)齊
如果僅僅是為了文本在元素內(nèi)居中對(duì)齊，可以使用 text-align: center;
文本居中對(duì)齊
提示: 更多文本對(duì)齊實(shí)例，請(qǐng)參閱 CSS 文本 章節(jié)。
圖片居中對(duì)齊
要讓圖片居中對(duì)齊, 可以使用 margin: auto; 并將它放到 塊 元素中:
左右對(duì)齊 - 使用定位方式
我們可以使用 position: absolute; 屬性來對(duì)齊元素:
小白教程 -- 行動(dòng)比思想更具有力量，加油追夢(mèng)人?。。?/p>
實(shí)例
運(yùn)行代碼 ?
注釋：絕對(duì)定位元素會(huì)被從正常流中刪除，并且能夠交疊元素。
提示: 當(dāng)使用 position 來對(duì)齊元素時(shí), 通常 <body> 元素會(huì)設(shè)置 margin 和 padding 。 這樣可以避免在不同的瀏覽器中出現(xiàn)可見的差異。
當(dāng)使用 position 屬性時(shí)，IE8 以及更早的版本存在一個(gè)問題。如果容器元素（在我們的案例中是 <div class="container">）設(shè)置了指定的寬度，并且省略了 !DOCTYPE 聲明，那么 IE8 以及更早的版本會(huì)在右側(cè)增加 17px 的外邊距。這似乎是為滾動(dòng)條預(yù)留的空間。當(dāng)使用 position 屬性時(shí)，請(qǐng)始終設(shè)置 !DOCTYPE 聲明：
實(shí)例
運(yùn)行代碼 ?
左右對(duì)齊 - 使用 float 方式
我們也可以使用 float 屬性來對(duì)齊元素:
實(shí)例
運(yùn)行代碼 ?
當(dāng)像這樣對(duì)齊元素時(shí)，對(duì) <body> 元素的外邊距和內(nèi)邊距進(jìn)行預(yù)定義是一個(gè)好主意。這樣可以避免在不同的瀏覽器中出現(xiàn)可見的差異。
注意：如果子元素的高度大于父元素，且子元素設(shè)置了浮動(dòng)，那么子元素將溢出，這時(shí)候你可以使用 "clearfix(清除浮動(dòng))" 來解決該問題。
我們可以在父元素上添加 overflow: auto; 來解決子元素溢出的問題:
當(dāng)使用 float 屬性時(shí)，IE8 以及更早的版本存在一個(gè)問題。如果省略 !DOCTYPE 聲明，那么 IE8 以及更早的版本會(huì)在右側(cè)增加 17px 的外邊距。這似乎是為滾動(dòng)條預(yù)留的空間。當(dāng)使用 float 屬性時(shí)，請(qǐng)始終設(shè)置 !DOCTYPE 聲明：
實(shí)例
運(yùn)行代碼 ?
垂直居中對(duì)齊 - 使用 padding
CSS 中有很多方式可以實(shí)現(xiàn)垂直居中對(duì)齊。 一個(gè)簡(jiǎn)單的方式就是頭部頂部使用 padding:
我是垂直居中。
如果要水平和垂直都居中，可以使用 padding 和 text-align: center:
我是水平和垂直都居中的。
垂直居中 - 使用 line-height
我是垂直居中的。
實(shí)例
運(yùn)行代碼 ?
垂直居中 - 使用 position 和 transform
除了使用 padding 和 line-height 屬性外,我們還可以使用 transform 屬性來設(shè)置垂直居中:
實(shí)例
運(yùn)行代碼 ?
提示: 更多 transform 屬性內(nèi)容可以參閱 2D 翻轉(zhuǎn)章節(jié)。