小編給大家分享一下css的居中代碼有哪些，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

鶴壁網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,鶴壁網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為鶴壁上千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的鶴壁做網(wǎng)站的公司定做！

css居中代碼有：1、“vertical-align:middle”；2、“display:flex”；3、給父元素設(shè)置“display:table”，子元素設(shè)置“display:table-cell”可實(shí)現(xiàn)CSS垂直居中等等。

通過vertical-align:middle實(shí)現(xiàn)CSS垂直居中是最常使用的方法，但是有一點(diǎn)需要格外注意，vertical生效的前提是元素的display：inline-block。因?yàn)閕nline-block可以兼具行內(nèi)元素和塊級(jí)元素的特點(diǎn)，能夠使得元素有寬度和高度。從而在盒子內(nèi)能夠?qū)崿F(xiàn)居中

通過display:flex實(shí)現(xiàn)CSS垂直居中的方法是給父元素display:flex;而子元素align-self:center;

這個(gè)跟CSS水平居中的原理是一樣的，只是在flex-direction上有所差別，一個(gè)是row(默認(rèn)值)，另外一個(gè)是column。

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

先給父元素position:relative，再給子元素position:absolute，通過translateY即可定位到垂直居中的位置。這個(gè)是縱軸居中，由CSS3的新特性translate，可以改變?cè)卦诳v軸上的偏移。

設(shè)置子元素的line-height值等于父元素的height，這種方法適用于子元素為單行文本的情況。同樣也是縱軸居中。

括展資料：

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。

看完了這篇文章，相信你對(duì)“css的居中代碼有哪些”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章題目：css的居中代碼有哪些-創(chuàng)新互聯(lián)
URL地址：http://weahome.cn/article/dsisgd.html