css 3d，css 居中這個(gè)很多人還不知道,現(xiàn)在讓我們一起來(lái)看看吧！

1、通過(guò)vertical-align:middle實(shí)現(xiàn)CSS垂直居中是最常使用的方法，但是有一點(diǎn)需要格外注意，vertical生效的前提是元素的display：inline-block。

2、因?yàn)閕nline-block可以兼具行內(nèi)元素和塊級(jí)元素的特點(diǎn)，能夠使得元素有寬度和高度。

(資料圖)

3、從而在盒子內(nèi)能夠?qū)崿F(xiàn)居中通過(guò)display:flex實(shí)現(xiàn)CSS垂直居中的方法是給父元素display:flex;而子元素align-self:center;這個(gè)跟CSS水平居中的原理是一樣的，只是在flex-direction上有所差別，一個(gè)是row(默認(rèn)值)，另外一個(gè)是column。

4、給父元素display:table，子元素display：table-cell的方式實(shí)現(xiàn)CSS垂直居中，表格也是常用的居中模式，缺點(diǎn)就是會(huì)對(duì)下面的元素某些樣式造成一定的影響，不推薦經(jīng)常使用這個(gè)方式。

5、先給父元素position:relative，再給子元素position:absolute，通過(guò)translateY即可定位到垂直居中的位置。

6、這個(gè)是縱軸居中，由CSS3的新特性translate，可以改變?cè)卦诳v軸上的偏移。

7、設(shè)置子元素的line-height值等于父元素的height，這種方法適用于子元素為單行文本的情況。

8、同樣也是縱軸居中。

9、括展資料：層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。

10、CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。

11、CSS百度百科CSS參考手冊(cè)水平居中設(shè)置元素為文本或者圖片等行內(nèi)元素時(shí)，可以通過(guò)text-align:center;實(shí)現(xiàn)。

12、當(dāng)設(shè)置的元素為塊狀元素時(shí)，text-align:center; 就不起作用了，這時(shí)候分兩種情況：1) 定寬塊狀元素通過(guò)設(shè)置左右 margin 為 auto 即可實(shí)現(xiàn)。

13、margin:0 auto;2) 不定寬塊狀元素方法一：① 加入 table 標(biāo)簽；② 設(shè)置 display:inline 方法，然后 text-align:center 實(shí)現(xiàn)。

14、與第一種類似，顯示類型設(shè)為行內(nèi)元素；優(yōu)勢(shì)：不用增加無(wú)語(yǔ)義標(biāo)簽缺點(diǎn)：變成了行內(nèi)元素，少了一些功能，例如長(zhǎng)度。

15、③ 設(shè)置 position:absolute 和 left 50%，利用相對(duì)定位的方式，將元素左偏移50%；垂直居中父元素確定高度的單行文本通過(guò)設(shè)置 line-height 與 height 相同的值即可完成。

16、line-height 與 font-size 的計(jì)算之差，在 CSS 中稱為“行間距”，分為兩半，分別加到一個(gè)文本內(nèi)容的頂部和底部。

17、缺點(diǎn)：當(dāng)文字內(nèi)容的長(zhǎng)度大于塊的寬時(shí)，就有內(nèi)容脫離了塊。

18、父元素高度確定的多行文本1) 使用 padding-top 和 padding-bottom 來(lái)居中。

19、利用父元素高度減去文本高度，所得的值平分到 top bottom，達(dá)到居中的目的。

20、2) 使用插入 table (包括 tbody tr td) 標(biāo)簽，同時(shí)設(shè)置 vertical-align:middle (在父元素設(shè)置此樣式時(shí)，會(huì)對(duì) inline-block) 類型的子元素都有用。

21、3) 在 chrome firefox IE8 以上的瀏覽器下可以設(shè)置塊級(jí)元素的 display 為 table-cell (設(shè)置為表格單元顯示)，激活 vertical-align 屬性，但 IE6 IE7 并不支持。

22、優(yōu)點(diǎn)：不用加多余的無(wú)意義的標(biāo)簽缺點(diǎn)：兼容性差，且修改了 display 的 block 變成了 table-cell，破壞了原有的塊狀元素的性質(zhì)。

23、資料 拓展：層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。

24、CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。

25、可從兩個(gè)方面來(lái)確保在各種瀏覽器中全局居中：頁(yè)面內(nèi)容擴(kuò)展資料：一、認(rèn)識(shí)布局居中與內(nèi)容居中CSS DIV布局居中布局居中是對(duì)框架盒子本身設(shè)置。

26、讓網(wǎng)頁(yè)主體水平居中于瀏覽器中，就需設(shè)置margin:0 auto實(shí)現(xiàn)布局居中。

27、布局居中針對(duì)框架盒子本身居中。

28、布局居中主要是對(duì)布局框架設(shè)置比如（DIV盒子） 設(shè)置。

29、一般網(wǎng)頁(yè)布局中最外層主體框架設(shè)置布局居中樣式（margin:0 auto）實(shí)現(xiàn)。

30、如果不設(shè)置布局居中代碼，其有的瀏覽器中主體是居中的，但有的瀏覽器中靠左顯示，引起兼容性問(wèn)題，所以要讓一個(gè)盒子水平居中于瀏覽器中就 必須設(shè)置一個(gè)margin:0 auto樣式。

31、特點(diǎn)：實(shí)現(xiàn)居中非常特別使用margin樣式實(shí)現(xiàn)，需要特別注意。

32、2、CSS DIV內(nèi)容居中和DIV布局居中有著同樣居中字眼的內(nèi)容居中，則是對(duì)盒子里內(nèi)容（文字、圖片等內(nèi)容）實(shí)現(xiàn)水平居中。

33、使用CSS樣式單詞與值代碼為text-align:center。

34、不管是對(duì)div標(biāo)簽、h1標(biāo)簽、h2標(biāo)簽、p標(biāo)簽等html元素標(biāo)簽設(shè)置都能讓其對(duì)于盒子里內(nèi)容水平居中。

35、擴(kuò)展CSS代碼：CSS內(nèi)容居中：text-align:centerCSS內(nèi)容靠左：text-align:leftCSS內(nèi)容靠右：text-align:right參考資料:博客園水平居中：text-align:center垂直居中：vertical-align:middle;line-height:30px;/*line-height塊標(biāo)記用到*/先給要定義的div定義寬度 width:***px; margin:0 auto; 這樣就可以了。

本文到此分享完畢，希望對(duì)大家有所幫助。