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

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計、網(wǎng)站制作和南充服務(wù)器托管的網(wǎng)絡(luò)公司，有著豐富的建站經(jīng)驗和案例。

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

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

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

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

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

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

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

括展資料：

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

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

分享題目：css的居中代碼有哪些
標(biāo)題來源：http://chinadenli.net/article42/gohdec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、做網(wǎng)站、網(wǎng)站建設(shè)、面包屑導(dǎo)航、虛擬主機(jī)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)