css居中归纳（一）

---

原本我居中的方法就是一个个去试，不行就换。但实在是耗时，简单归纳了一下居中的几种方式和代码，才发现不仅思路清晰，每种居中方式都可深究，但此篇我就简单展示方式，不做更深讨论，接下来一起看看吧

块级元素居中

• 使用定位及css3位置变换

  一般不定宽高，慎用定位，但我们同样可以通过定位进行垂直居中

  .demo1-2{
  	/*deno1-2是内部的盒子*/
      width: 100px;
      height: 100px;
      border: 1px solid black;
      position: relative;
      /*加入以下三句使不定宽块级垂直水平居中*/
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
  }
  

  优点：
  1.代码量少

  ​ 2.内部盒子宽高可变，不会影响居中效果

  缺点:
  1.IE8不支持

  ​ 2.可能干扰其它transfoem效果

  ​ 3.某些情况会出现文本或元素边界渲染模糊的现象

  ---

• 使用弹性盒子布局

  我们通过进行弹性布局，控制弹性盒子的对齐方式

  注意：我们需要在父元素属性中设置，才能使子元素进行居中

  .demo1-1{
  
      width: 300px;
      height: 300px;
      border: 1px solid black;
      /*父元素写下三行代码即可实现水平垂直居中*/
      display: flex;
      justify-content: center;
      align-items: center;
  
  }
  

  ​ 优点: 操作简单，相比以前的div+css+position+display弹性盒子不用考虑定位

  ​ 缺点: 由于弹性布局与我们的传统的布局不同，inline,block,text-align,float等会失效

  ---

• 使用margin:auto居中

  .demo1-2{
     
      width: 100px;
      height: 100px;
      border: 1px solid black;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      
  }
  

  ​ 优点：符合传统的布局方式，不存在兼容性问题

  ​ 缺点：进行了定位，固定了相对父级的距离和margin，相对局限

行级元素

• 行级元素对齐通过text-align height = line-height实现

  .demo1-1{
  
      width: 300px;
      height: 300px;
      border: 1px solid black;
      text-align: center;
      
  }
  
  span{
      line-height: 300px;
  }
  
  

  text-align通过给父元素设置使子元素（无论行级还是块级）水平居中

  height = line-height保证行级元素垂直居中

  ​ 优点：操作简单，代码量少

  ​ 缺点：需要父级元素定高，但很多时候盒子是不固定高的

  ---

• 与块级元素一样通过弹性盒子进行居中

  .demo1-1{
  
      width: 300px;
      height: 300px;
      border: 1px solid black;
      /*父元素设置，子元素居中*/
      display: flex;
      justify-content: center;
      align-items: center;
      
  }
  

  优点：父元素可以不定高，应用广泛，不太受限制

  缺点：导致传统布局中的inline,block,text-align,float失效

• table-cell和text-align实现居中

  .demo1-1{
  
      width: 300px;
      height: 300px;
      border: 1px solid black;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      
  }
  

  ​ 优点：如果使用表格模型，使用table-cell代码量少，节省了代码

  ​ 缺点：
  1.设置表格元素后，自身margin失效

  ​ 2.如果设置了table,table-row三者之间会相互作用及影响

常用的几种居中方式就这么多了，希望我的浅见能给看到这篇文章的大家一点帮助，一起成长啦！