首页 > 代码库 > 居中样式

居中样式

2024-09-09 23:07:12   221人阅读

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

一、子元素不固定

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

居中样式


联系
我们