135-1821-9792

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://www.wtcwzsj.com/article/cdogoop.html

    其他资讯

    
    关于我们
    我们的服务
    网站建设案例
    新闻动态
    联系我们

    135-1821-9792

    公司服务热线
    友情链接： 酒柜书柜鞋柜定制   开业活动策划   网站ssl证书   温岭网站制作   网络营销推广   平昌做网站   成都艾瑞格   成都企业邮箱公司   天泽尚品   培训网站方案   

    Copyright © 2009-2022 www.wtcwzsj.com 青羊区广皓图文设计工作室（个体工商户） 版权所有　蜀ICP备19037934号