上下左右居中的那些事

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

1. 左右居中：

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

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

c. 使用定位

2. 上下居中：

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用着很方便，上下左右居中很容易达到，包括浮动元素