上下左右居中的那些事

做前端开发难免会碰到左右居中，上下居中，之前也一直没做个总结有哪些上下左右居中的方法，今天记录一下经常会遇见的小问题，以便以后回顾方便。

 
左右居中： 
 

   a 
  . 行内元素左右居中只需在 
  父元素上加上 
  text-align:center; 
  属性即可 
 

 
  b. 块级元素左右居中在 
  子元素 
  上加上 
  margin:auto; 
 

 
  c. 使用定位 
 

 
上下居中： 
 

 
  a. 文本对象： 
 

   单行文本（文本长度没超过盒子长度）：直接使用line-height; 
 

   多行文本：配合定位居中 
 

 
  b.  
  使用定位居中： 
  
  top:50%; 
  
  transform：translateY(-50%); 
  
  知道元素高度的情况下 
  
  margin-top：高度的一般

 
  c. table居中： 
 

 
  父级 
  添加 
  display:table; 
  属性， 
  子级 
  添加 
  display:table-cell; vertical-align:middle; 
  属性 
 

 
  （注意：使用table和table-cell属性的元素必须是直接父子级关系，才会上下居中） 
 

   父级parent3上使用 
  display:table; 
 

 
  子级child3上使用 
  display:table-cell;vertical-align:middle;

 
  parent3和child3属于直接父子级关系 
  
    此时parent3和child3不属于直接父子级关系 
  
    使用两属性的元素不属于直接父子级关系时不会居中

 
  注意注意！！！： 
 

 
  在直接父子级关系的元素中子级使用display:table-cell不支持定义 
 

 
  宽高（仅限于直接父子级时使用display:table-cell的子元素） 
 

 
  如图1：此时parent31定义高度无效

 
  如图2：此时parent31去掉 
  display:table-cell 
  属性高度才生效

 
  使用这两个属性的元素 
  不属于直接父子级关系 
  时 
 

   好比 
  parent3和child3不属于直接父子级 
 

 
  给child3定义宽250px,高100px，即使使用 
  display:table-cell 
  依旧生效。

 
  值得注意的是：元素单独使用display:table-cell;vertical-align:middle
      不配合父级使用display:table时，宽高生效并且能实现上下居中

 
  支持padding属性，但不支持margin 
 

 
  d.  
  父元素伪类居中
    父元素伪类上给以下属性
      display：inline-block;
      vertical-aling：midlle;
     height：100%；
     width:0;

    子元素
     display：inline-block;
      vertical-aling：midlle;
    
   
 
 

 
  e.  
  flex居中
    flex用着很方便，上下左右居中很容易达到，包括浮动元素

上下左右居中的那些事

猜你喜欢