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.shufengxianlan.com/qtweb/news29/86179.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    定制网站知识

    行业网站建设

    虚拟主机　　 　彭州网站建设　　 　合江网站建设　　 　防护网厂　　 　SSL证书　　 　长城雪茄　　 　成都服务器托管　　 　重庆网站建设公司　　 　外贸网站建设方案　　 　品牌网站建设　　 　全网营销网站推广　　 　成都网站设计　　 　成都做网站　　 　绵阳电信机房　　 　企业网站维护　　 　响应式建站　　 　成都微信二次开发　　 　电商网站建设　　 　眉山网站建设　　 　奢侈品网站建设方案