最近在菜鳥教程網站發現幾個CSS屬性很有用，就做了下面一個簡單的佈局模板以備不時之需。另外，強烈推薦菜鳥教程這個學習平臺，教程很全面，也很詳細。地址：https://www.runoob.com/
以上佈局是沒有滾動條的，如果給用於佈局的div加上邊框，可能就會出現邊框了！主要用到了align-center（垂直方向佈局）與justify-align（水平方向佈局）
源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>管理系統模板-登錄</title>
<style>
html,body{
height: 100%;
margin: 0px;
}
body{
background: #eee;
}
.ver-center{
display: flex;
flex-flow: row wrap;
align-content: center;
}
.hor-center{
justify-content: center;
}
.main {
height: 100%;
border: 0px solid black;
align-content: space-between;
}
.top {
width: 100%;
height: 19%;
border: 0px solid red;
}
.middle {
width: 100%;
height: 65%;
border: 0px solid blue;
/* 水平分佈 */
display: flex;
align-items: stretch;
}
.bottom {
width: 100%;
height: 12%;
border: 0px solid yellow;
}
.middle .left {
width: 25%;
border: 1px solid gray;
}
.middle .center {
width: 50%;
border: 1px solid #ff6600;
}
.middle .right {
width: 25%;
border: 1px solid gray;
}
.head,.end{
width: 70%;
height: 50px;
border: 1px solid #f09298;
text-align: center;
}
.container {
width: 50%;
height: 50%;
border: 1px solid red;
}
.container input{
width: 70%;
height: 20px;
}
.container .inputItem{
width: 100%;
height: 30px;
border: 1px solid #666;
/* line-height: 32px; */
}
.container .inputItem label{
display: inline-block;
width: 90px;
height: 100%;
text-align: right;
}
.container .btnGroup{
border: 1px solid #666;
width: 100%;
height: 30px;
}
</style>
</head>
<body>
<div class="main">
<div class="top">上</div>
<div class="middle">
<div class="left">左</div>
<div class="center ver-center hor-center">
<div class="head ver-center hor-center">logo System</div>
<div class="container ver-center">
<div class="inputItem">
<label>username：</label>
<input type="text" />
</div>
<div class="inputItem">
<label>password：</label>
<input type="password" />
</div>
<div class="btnGroup ver-center hor-center">
<button>login</button>
<button>regist</button>
</div>
</div>
<div class="end ver-center hor-center">
<a href="javascript:void(0);">download</a> |
<a href="javascript:void(0);">baidu</a> |
<a href="javascript:void(0);">news</a>
</div>
</div>
<div class="right">右</div>
</div>
<div class="bottom">下</div>
</div>
</body>
</html>