Diccionario front-end común (html + css)

1.1 Centro horizontal

    1.1.1  行内元素 （父元素）text-align，（子元素）inline-block
        .parent{text-align:center} .child{display:inline-block}         
    1.1.2  块状元素   使用margin:0 auto来实现
      .parent{} .child{width:200px;margin:0 auto}
    1.1.3 （子元素）display:table;margin:0 auto;
      .child{display:table;margin:0 auto;} 
    1.1.4  决定定位实现 （父元素）position:relative，（子元素）absolute+left+transform（translateX(-50%)）
      .parent{position:relative;} .child{position:absolute;left:50%;transform:translate(-50%);} 
    1.1.5  flex+justify-content/margin
        /*第一种方法*/
          .parent{display:flex;justify-content:center;}
        /*第二种方法*/
          .parent{display:flex;}
          .child{margin:0 auto;} 

1.2 Centro vertical

 1.2.1 单行文本 设置line-height等于父元素高度        
      .child{ height:20px; line-height:20px}
    1.2.2  行内块级元素  使用display:inline-block; vertical-align:middle;
      .child{display:inline-block; vertical-align:middle}
      .parent:after{display:inline-block; vertical-align:middle} 
    1.2.3  块级元素 使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;  
        /*第一种方法*/
          .parent{display:table-cell;vertical-align:middle;height:20px;}
        /*第二种方法*/
          .parent{display:inline-block;vertical-align:middle;line-height:20px;} 
    1.2.4 使用绝对定位
      .parent{position:relative;}
      .child{positon:absolute;top:50%;transform:translate(0,-50%);}
    1.2.5 使用flex实现方法 （父）flex + align-items  
      .parent{display:flex;align-items:center;} 

1.3 Centro horizontal y verticalmente

1.3.1 元素高度固定
  .parent{position:relative;}
  .child{position:absolute;top:50%;left:50%;width:固定;height:固定;margin-top:-0.5*高度;margin-left:-0.5*宽度;}
1.3.2 元素高度固定
  .parent{position:relative;}
  .child{position:absolute;width:固定;height:固定;top:0;left:0;right:0;bottom:0;margin:auto}
1.3.3 （父）text-align + table-cell + vertical-align，（子）inline-block（兼容性方案）
  .parent{display:table-cell;vertical-align:middle;text-align:center;}
  .child{display:inline-block;}
1.3.4 使用绝对定位
  .parent{position:relative;}
  .child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} 
1.3.5 利用flex实现
  .parent{display:flex;justify-content:center;align-items:center;}
1.3.6 利用定位实现
  .parent{position:relative;}
  .child{position:absolute;top:0;left:0;bottom:0;right:0;margin:0 auto;} 

1.4 flotador claro

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}
.clearfix:after {
  clear: both;
}

1.5 Mostrar elipses ...

1.5.1  单行显示
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  cursor: pointer;
}
1.5.2  多行显示
.ellipsis_clamp2 {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

1.6 Icono de carga

.iconLoading {
  animation:loading 1s linear infinite;
}
@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}