怎么在css中實(shí)現(xiàn)垂直居中?針對(duì)這個(gè)問(wèn)題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
成都創(chuàng)新互聯(lián)公司公司2013年成立,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元湖南做網(wǎng)站,已為上家服務(wù),為湖南各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792
css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言,主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式,使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言,并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中,而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定,從而實(shí)現(xiàn)級(jí)聯(lián)效果,發(fā)展至今,css不僅能裝飾網(wǎng)頁(yè),也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。
css實(shí)現(xiàn)垂直居中
1.利用line-height實(shí)現(xiàn)居中,這種方法適合純文字類的;
<!-- css --> <style> .parents { height: 400px; line-height: 400px; width: 400px; border: 1px solid red; text-align: center; } .child { background-color: blue; color: #fff; } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child">css布局,實(shí)現(xiàn)垂直居中</span> </div> </body>
2.通過(guò)設(shè)置父容器相對(duì)定位,子級(jí)設(shè)置絕對(duì)定位,標(biāo)簽通過(guò)margin實(shí)現(xiàn)自適應(yīng)居中;
<!-- css --> <style> .parents { height: 400px; width: 400px; border: 1px solid red; position: relative; } .child { width: 200px; height: 100px; line-height: 100px; text-align: center; color: #fff; background-color: blue; /* 四個(gè)方向設(shè)置為0, 然后通過(guò)margin為auto自適應(yīng)居中 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child">css布局,實(shí)現(xiàn)垂直居中</span> </div> </body>
3.彈性布局flex 父級(jí)設(shè)置display: flex; 子級(jí)設(shè)置margin為auto實(shí)現(xiàn)自適應(yīng)居中;
<!-- css --> <style> .parents { height: 400px; width: 400px; border: 1px solid red; display: flex; } .child { width: 200px; height: 100px; line-height: 100px; text-align: center; color: #333; background-color: yellow; margin: auto; } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child">css布局,實(shí)現(xiàn)垂直居中</span> </div> </body>
4. 父級(jí)設(shè)置相對(duì)定位,子級(jí)設(shè)置絕對(duì)定位,并且通過(guò)位移transform實(shí)現(xiàn);
<!-- css --> <style> .parents { height: 400px; width: 400px; border: 1px solid red; position: relative; } .child { width: 200px; height: 100px; line-height: 100px; text-align: center; color: #fff; background-color: green; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child">css布局,實(shí)現(xiàn)垂直居中</span> </div> </body>
5. 父級(jí)設(shè)置彈性盒子,并設(shè)置彈性盒子相關(guān)屬性;
<!-- css --> <style> .parents { height: 400px; width: 400px; border: 1px solid red; display: flex; justify-content: center; /* 水平 */ align-items: center; /* 垂直 */ } .child { width: 200px; height: 100px; color: black; background-color: orange; } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child"></span> </div> </body>
6. 網(wǎng)格布局,父級(jí)通過(guò)轉(zhuǎn)換成表格形式,然后子級(jí)設(shè)置行內(nèi)或行內(nèi)塊實(shí)現(xiàn)。(需要注意的是:vertical-align: middle使用的前提條件是內(nèi)聯(lián)元素以及display值為table-cell的元素)。
<!-- css --> <style> .parents { height: 400px; width: 400px; border: 1px solid red; display: table-cell; text-align: center; vertical-align: middle; } .child { width: 200px; height: 100px; color: #fff; background-color: blue; display: inline-block; /* 子元素設(shè)置行內(nèi)或行內(nèi)塊 */ } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child"></span> </div> </body>
關(guān)于怎么在css中實(shí)現(xiàn)垂直居中問(wèn)題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒(méi)有解開(kāi),可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
當(dāng)前題目:怎么在css中實(shí)現(xiàn)垂直居中
本文鏈接:http://www.muchs.cn/article42/ghjjhc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供域名注冊(cè)、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、網(wǎng)站收錄、網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)