css+div上下左右自适应居中

主要记录自己日常积累的布局相关的东西，持续更新中。

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;
		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- 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;