居中样式

每次都要纠结半天，这个居中。

一、子元素不固定

1   .pro-car-inner{//子元素

max-width:1000px;

color:#fff;

position:absolute;

top:150px; left:0;

bottom:0; right:0;

margin:auto;
             }//这种无法垂直居中  都兼容

 2.

  .pro-car-con{height:500px;width:100%; justify-content:center;align-items:center;display:flex;}  //IE无法兼容

 

3  .sol-main {//父元素

   height: 500px;

   width: 100%;

   -webkit-box-align: center;

   -webkit-box-pack: center ；

   display: -webkit-box;

   text-align: center;//无法兼容ie

}

4. .sol-main {//父元素

 display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
 justify-content: center;}//不兼容ie

 

5.父元素宽高是被子元素撑开的，宽高不定。设置子元素垂直居中。

.parent2 span{
    display: inline-block;;
    width: 0;
    height: 100%;
    vertical-align: middle;
    zoom: 1;/*BFC*/
    *display: inline;
}
.parent2 .child{
    display: inline-block;
    color: #fff;
    zoom: 1;/*BFC*/
    *display: inline;
}