css中有几种方法可以实现水平垂直居中-创新互联

css中有几种方法可以实现水平垂直居中？针对这个问题，今天小编总结这篇有关水平垂直居中的文章，可供感兴趣的小伙伴们参考借鉴，希望对大家有所帮助。

水平居中
（1）使用inline-block+text-align

demo

   .child {
       display:inline-block;
     }
     .parent {
       text-align:center
     }

   原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。
   优点：兼容性好，甚至可以兼容ie6、ie7

   (2)使用table+margin
     .child {
       display:table
       margin:0 auto;
     }
原理：先将子框设置为块级表格来显示，再设置子框居中以达到水平居中。
缺点：不支持ie6、ie7,将div换成table

（3）使用absolute+transform
   .child {
         position:absolute;
         left:50%;
         transform:translateX(-50%)
     }
     .parent {
          position:relative
     }

缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

(4)使用flex+margin
     .child {
      margin:0 auto
     }
     .parent {
         display:flex
     }
缺点：低版本浏览器(ie6 ie7 ie8)不支持

(5)使用flex+justify-content
   .parent {
         display:flex;
         justify-content:center
     }
   缺点：低版本浏览器(ie6 ie7 ie8)不支持

   垂直居中
   (1)使用table-cell+vertical-align

     .parent {
         display:table-cell；
         vertical-align:middle
     }

   (2)使用absolute+transform
     .child {
      position:absolute;
       top:50%;
       transform:translateY(-50%)
     }
     .parent {
         position:relative
     }
缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

   (3)使用flex+align-items
     .parent {
       display:flex;
       align-items:center;
     }

   水平垂直居中
   (1)使用absolute+transform(未知高度)
   .parent {
       position:relative;
     }
   .child {
       position:absolute;
       left:-50%;
       top:-50%
       transform:translate(-50%,-50%)
     }
   (1.1)使用absolute+transform(已知高度)
   .parent {
       position:relative;
     }
   .child {
       position:absolute;
       width:100px;
       height:100px;
       left:-50%;
       top:-50%
      margin: -50px 0 0 -50px;
     }

     (2)使用inline-block+text-align+table-cell+vertical-align
     .parent {
       text-align:center;
       display:table-cell;
       vertical-align:middle;
     }
     .child {
         display:inline-block;
     }
     优点：兼容性较好

     (3)使用flex+justify-content+align-items
     .parent {
       display:flex;
       justify-content:center;
       align-items:center;
     }
     缺点：兼容性存在一定问题

关于css中实现水平垂直居中的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果喜欢这篇文章，不如把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。