溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

用Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中

發(fā)布時(shí)間：2021-08-10 17:41:01 來(lái)源：億速云 閱讀：150 作者：chen 欄目：web開(kāi)發(fā)

本篇內(nèi)容介紹了“用Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

Flexbox實(shí)現(xiàn)一個(gè)div元素在body頁(yè)面中水平垂直居中：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html>  

  2. <html lang="en">  

  3. <head>  

  4.   <meta charset="utf-8"/>  

  5.   <title>Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中</title>  

  6.   <style type="text/css">  

  7.     html {   

  8.       height: 100%;   

  9.     }    

  10.   

  11.     body {   

  12.       display: -webkit-box;  /* 老版本語(yǔ)法: Safari,  iOS, Android browser, older WebKit browsers.  */   

  13.       display: -moz-box;    /* 老版本語(yǔ)法: Firefox (buggy) */    

  14.       display: -ms-flexbox;  /* 混合版本語(yǔ)法: IE 10 */   

  15.       display: -webkit-flex;  /* 新版本語(yǔ)法： Chrome 21+ */   

  16.       display: flex;       /* 新版本語(yǔ)法： Opera 12.1, Firefox 22+ */   

  17.   

  18.       /*垂直居中*/     

  19.       /*老版本語(yǔ)法*/   

  20.       -webkit-box-align: center;    

  21.       -moz-box-align: center;   

  22.       /*混合版本語(yǔ)法*/   

  23.       -ms-flex-align: center;    

  24.       /*新版本語(yǔ)法*/   

  25.       -webkit-align-items: center;   

  26.       align-items: center;   

  27.   

  28.       /*水平居中*/   

  29.       /*老版本語(yǔ)法*/   

  30.       -webkit-box-pack: center;    

  31.       -moz-box-pack: center;    

  32.       /*混合版本語(yǔ)法*/   

  33.       -ms-flex-pack: center;    

  34.       /*新版本語(yǔ)法*/   

  35.       -webkit-justify-content: center;   

  36.       justify-content: center;   

  37.   

  38.       margin: 0;   

  39.       height: 100%;   

  40.       width: 100% /* needed for Firefox */   

  41.     }    

  42.     /*實(shí)現(xiàn)文本垂直居中*/   

  43.     .box {   

  44.       display: -webkit-box;    

  45.       display: -moz-box;   

  46.       display: -ms-flexbox;   

  47.       display: -webkit-flex;   

  48.       display: flex;   

  49.       -webkit-box-align: center;    

  50.       -moz-box-align: center;   

  51.       -ms-flex-align: center;   

  52.       -webkit-align-items: center;   

  53.       align-items: center;   

  54.       width:500px;   

  55.       height: 200px;   

  56.       background: red;   

  57.       color: #fff;   

  58.       font-weight: bold;   

  59.       font-size: 30px;   

  60.     }    

  61.   </style>  

  62. </head>  

  63. <body>  

  64.   <div class="box">Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中</div>  

  65. </body>  

  66. </html>   

“用Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手