甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

Spirit带你了解CSS各个方向的居中方案

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

先看HTML的骨架

创新互联公司，是成都地区的互联网解决方案提供商，用心服务为企业提供网站建设、成都app软件开发、小程序设计、系统定制设计和微信代运营服务。经过数十载的沉淀与积累，沉淀的是技术和服务，让客户少走弯路，踏实做事，诚实做人，用情服务，致力做一个负责任、受尊敬的企业。对客户负责，就是对自己负责，对企业负责。

后面的代码都是基于这个来写的

 
 
 
    
  
  
  
  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的时候,子元素要设置为行内块元素,是利用了行内元素的特性

     
 
 
      
  
  
  
    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实现垂直居中

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

    也可以在子类元素上加 align-self:center 实现垂直居中

     
 
 
      
  
  
  
    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布局实现绝对居中

     
 
 
      
  
  
  
    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 实现绝对居中

     
 
 
      
  
  
  
    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.

    网站名称：Spirit带你了解CSS各个方向的居中方案
    本文地址：http://chengdu.cdxwcx.cn/article/cdogoop.html

    其他资讯