日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Spirit帶你了解CSS各個(gè)方向的居中方案

水平居中和垂直居中的方案

先看HTML的骨架

創(chuàng)新互聯(lián)公司，是成都地區(qū)的互聯(lián)網(wǎng)解決方案提供商，用心服務(wù)為企業(yè)提供網(wǎng)站建設(shè)、成都app軟件開發(fā)、小程序設(shè)計(jì)、系統(tǒng)定制設(shè)計(jì)和微信代運(yùn)營服務(wù)。經(jīng)過數(shù)十載的沉淀與積累，沉淀的是技術(shù)和服務(wù)，讓客戶少走彎路，踏實(shí)做事，誠實(shí)做人，用情服務(wù)，致力做一個(gè)負(fù)責(zé)任、受尊敬的企業(yè)。對客戶負(fù)責(zé)，就是對自己負(fù)責(zé)，對企業(yè)負(fù)責(zé)。

后面的代碼都是基于這個(gè)來寫的

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.      
    6. 
  
  
  
  6.      
    7. 
  
  
  
  7.      
    8. 
  
  
  
  8.     Document 
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.     
 
  •  
  •  

    • 水平居中

    1. 通過 margin 水平居中

     
 
 
      
  
  
  
    1. /* 1. 通過margin 水平居中 */ 
      2. 
  
  
  
    2. .box { 
      3. 
  
  
  
    3.     width: 200px; 
      4. 
  
  
  
    4.     height: 200px; 
      5. 
  
  
  
    5.     background-color: orange; 
      6. 
  
  
  
    6. } 
      7. 
  
  
  
    7. .align { 
      8. 
  
  
  
    8.     margin: 0 auto; 
      9. 
  
  
  
    9. } 
      10.

    2. 通過 position 和 transform 水平居中

     
 
 
      
  
  
  
    1. /* 2.通過 position 和 transform 水平居中 */ 
      2. 
  
  
  
    2. .box { 
      3. 
  
  
  
    3.     width: 200px; 
      4. 
  
  
  
    4.     height: 200px; 
      5. 
  
  
  
    5.     background-color: orange; 
      6. 
  
  
  
    6. } 
      7. 
  
  
  
    7. .align { 
      8. 
  
  
  
    8.     position: relative; 
      9. 
  
  
  
    9.     left: 50%; 
      10. 
  
  
  
    10.     transform: translateX(-50%); 
      11. 
  
  
  
    11. } 
      12.

    3. 通過flex水平居中

     
 
 
      
  
  
  
    1. body {  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.     display: flex;  
      4. 
  
  
  
    4.     justify-content: center;  
      5. 
  
  
  
    5. }  
      6.

    通過 text-align:center 水平居中

    注意:使用text-align的時(shí)候,子元素要設(shè)置為行內(nèi)塊元素,是利用了行內(nèi)元素的特性

     
 
 
      
  
  
  
    1. body { 
      2. 
  
  
  
    2.     text-align: center; 
      3. 
  
  
  
    3. } 
      4. 
  
  
  
    4. .box { 
      5. 
  
  
  
    5.     display: inline-block; 
      6. 
  
  
  
    6.     width: 200px; 
      7. 
  
  
  
    7.     height: 200px; 
      8. 
  
  
  
    8.     background-color: orange; 
      9. 
  
  
  
    9. } 
      10.

    垂直居中

    1. flex布局垂直居中

    可以在父類上加 align-item:center實(shí)現(xiàn)垂直居中

     
 
 
      
  
  
  
    1. body { 
      2. 
  
  
  
    2.     height: 100vh; 
      3. 
  
  
  
    3.     display: flex; 
      4. 
  
  
  
    4.     align-items: center; 
      5. 
  
  
  
    5. } 
      6.

    也可以在子類元素上加 align-self:center 實(shí)現(xiàn)垂直居中

     
 
 
      
  
  
  
    1. .box { 
      2. 
  
  
  
    2.     align-self: center; 
      3. 
  
  
  
    3.     width: 200px; 
      4. 
  
  
  
    4.     height: 200px; 
      5. 
  
  
  
    5.     background-color: orange; 
      6. 
  
  
  
    6. } 
      7.

    通過position和transform 來垂直居中

     
 
 
      
  
  
  
    1. /* 第二種方案 position和transform */ 
      2. 
  
  
  
    2. .vertical{ 
      3. 
  
  
  
    3.     position: relative; 
      4. 
  
  
  
    4.     top: 50%; 
      5. 
  
  
  
    5.     transform: translateY(-50%); 
      6. 
  
  
  
    6. } 
      7.

    絕對居中

    flex布局實(shí)現(xiàn)絕對居中

     
 
 
      
  
  
  
    1. body { 
      2. 
  
  
  
    2.     height: 100vh; 
      3. 
  
  
  
    3.     display: flex; 
      4. 
  
  
  
    4.     align-items: center; 
      5. 
  
  
  
    5.     justify-content: center; 
      6. 
  
  
  
    6. } 
      7.

    通過 position和transform 實(shí)現(xiàn)絕對居中

     
 
 
      
  
  
  
    1. /* 第二種方案 position和transform */ 
      2. 
  
  
  
    2. .box { 
      3. 
  
  
  
    3.     position: relative; 
      4. 
  
  
  
    4.     top: 50%; 
      5. 
  
  
  
    5.     left: 50%; 
      6. 
  
  
  
    6.     transform: translate(-50%, -50%); 
      7. 
  
  
  
    7. } 
      8.

    網(wǎng)頁名稱：Spirit帶你了解CSS各個(gè)方向的居中方案
    鏈接分享：http://m.5511xx.com/article/cdogoop.html