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

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

先看HTML的骨架

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

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

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

    1. 通过 margin 水平居中

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

    2. 通过 position 和 transform 水平居中

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

    3. 通过flex水平居中

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

    通过 text-align:center 水平居中

    注意:使用text-align的时候,子元素要设置为行内块元素,是利用了行内元素的特性

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

    垂直居中

    1. flex布局垂直居中

    可以在父类上加 align-item:center实现垂直居中

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

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

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

    通过position和transform 来垂直居中

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

    绝对居中

    flex布局实现绝对居中

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

    通过 position和transform 实现绝对居中

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

    文章标题:Spirit带你了解CSS各个方向的居中方案
    网页链接:http://www.shufengxianlan.com/qtweb/news29/86179.html

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

    广告

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

    猜你还喜欢下面的内容

    定制网站知识

    行业网站建设