主要記錄自己日常積累的布局相關的東西，持續更新中。
1.登錄框上下左右自適應居中
以前想要把登錄表單始終放置在頁面的中間，花了不少心思，一直以來用的解決方法都是用js，感覺有點麻煩不是很好，於是在網上查詢了一下發現了一種比較的實現方法。
原理就是用position:absolute,然后用left：50%，top：50%，現在登錄表單左側直角是在頁面的中間了，但是登錄框本身還有寬度和高度，所以我們再用margin-left:-登錄框寬度，margin-top：-登錄框高度，就可以讓登錄框顯示在頁面的正中間了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>登錄框自適應居中</title>
<style>
#LoginContainer {
position: absolute;
width:400px;
height:200px;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-100px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="LoginContainer">
這是登錄框
</div>
</body>
</html>
很多問題的解決方法都不止一種，還是要多學習多交流啊。
2.左右布局，左側固定寬度，右側自適應寬度
原理就是左側div固定寬度+float，然后右側的div設置左間隔左側div寬度的距離就可以了（margin-left:左側div的寬度）
<style type="text/css"> html, body { padding: 0px; margin: 0px; height: 100%; overflow: hidden; } .container { height: 100%; border: 1px solid #ccc; min-width: 600px; } .container .west { border-right: 1px solid #ccc; height: 100%; width: 200px; float: left; } .container .content { height: 100%; margin-left: 200px; } </style> <div class="container"> <div class="west">west</div> <div class="content">content</div> </div>
3.利用translate(-50%, -50%)居中(紅色為關鍵部分)
position: fixed;
min-width: 100px;
color: #fff;
border-radius: 2px;
background-color: rgba(0, 0, 0, 0.6);
padding: 10px 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;