代码 复制 - 运行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>洛枫学院</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<link rel="stylesheet" type="text/css" href="../css/Base.css"/>
<link rel="stylesheet" type="text/css" href="../css/Icon.css"/>
<style>
.out {
width: 100%;
height: 300px;
background: red;
margin: 0 auto;
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;
}
.out .in {
width: 100px;
height: 100px;
background: white;
}
</style>
</head>
<body>
<div class="out">
<div class="in">
</div>
</div>
</body>
</html>
