css常用

多行文字对其

  <div>
    <span>测试测试，即便是多行，我也还是垂直居中对齐的。</span>
</div>
<style>
  div{ 
    display:table-cell;
    vertical-align: middle;
     }
</style>
  

图片大小不确定 垂直水平居中

<div>
   <img src="#" alt="">
</div>
<style>
  div{ 
    display:table-cell;
    text-align:center;
    vertical-align: middle;
     }
     img{
       vertical-align: middle; 
     }
  /*还可利用  background-position:center center; */
</style>

渐变

<style>
  .gradient{
    background: #000000;
    background: -moz-linear-gradient(top,  #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom,  #000000 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );   /*lf < ie9*/
}
</style>

flex布局

 <div class="parent">
    <span class="item1">子元素</span>
 </div>
 <style>
   .parent{
    flex-direction:row | row-reverse | column | column-reverse; /*主轴方向*/
    flex-wrap:nowrap | wrap | wrap-reverse;                    /*剩余空间处理*/
    flex-flow:<flex-direction> || <flex-wrap>;                 /**/
    justify-content: flex-start | flex-end | center | space-between | space-around;                 /* 主轴对其方式*/
    align-items:flex-start | flex-end | center | baseline | stretch; /*辅助轴对其方式*/
   }
   .item1{
    order:2;                                  /*排列权重 类似z-index*/
    flex-grow:2;                             /*空间多余放大比例*/
    flex-shrink:1;                          /*空间不足 缩小比例*/
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; /*简写*/
    align-self:auto | flex-start | flex-end | center | baseline | stretch;
   }                   /*自身独立 辅助轴对其方式*/
 </style>