css水平垂直居中

<div class="box"></div>

水平居中：

1.設置寬度，然後添加margin:0 auto屬性;

		.box {
			width: 200px;
			height: 200px;
			background-color: #ccc;
			margin:0 auto;
		}

2.設置絕對定位absolute;

		.box {
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: #ccc;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin:auto;
		}

3.利用flex佈局 

	<div class="container">
		<div class="box"></div>
	</div>

		.container {			
			display: flex;
			justify-content: center;
		}
		.box {
			width: 200px;
			height: 200px;
			background-color: #ccc;		
		}

水平垂直居中

1.設置絕對定位absolute，設置寬高及外邊距

		.box {
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: #ccc;
			top: 50%;
			left: 50%;
			margin-top: -100px;
			margin-left: -100px;
			
		}

2.利用transform屬性

		.box {
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: #444;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);			
		}