居中样式

Posted 2020-09-05 cindy—hmy

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

一、子元素不固定

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