css3 flex兼容性

来源：互联网发布：淘宝客服分流比例设置编辑：程序博客网时间：2024/05/05 16:22
flex兼容性
<!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8"/>  <title>Centering an Element on the Page</title>  <style type="text/css">      html {  height: 100%;} body {  display: -webkit-box;  /* 老版本语法: Safari,  iOS, Android browser, older WebKit browsers.  */  display: -moz-box;    /* 老版本语法: Firefox (buggy) */   display: -ms-flexbox;  /* 混合版本语法: IE 10 */  display: -webkit-flex;  /* 新版本语法： Chrome 21+ */  display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */  /*垂直居中*/      /*老版本语法*/  -webkit-box-align: center;   -moz-box-align: center;  /*混合版本语法*/  -ms-flex-align: center;   /*新版本语法*/  -webkit-align-items: center;  align-items: center;  /*水平居中*/  /*老版本语法*/  -webkit-box-pack: center;   -moz-box-pack: center;   /*混合版本语法*/  -ms-flex-pack: center;   /*新版本语法*/  -webkit-justify-content: center;  justify-content: center;  margin: 0;  height: 100%;  width: 100% /* needed for Firefox */} /*实现文本垂直居中*/h1 {  display: -webkit-box;   display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  -webkit-box-align: center;   -moz-box-align: center;  -ms-flex-align: center;  -webkit-align-items: center;  align-items: center;  height: 10rem;}      </style></head><body>  <h1>OMG, I’m centered</h1></body></html>
0 0