水平垂直居中方式总汇 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	
	<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=no" >
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		
		/* 不定宽高的水平垂直居中 */
		/* .smallBox{
			width:100px;
			height:100px;
			background:yellow;
			position:absolute;
			top: 50%;
			left:50%;
			z-index:3;
			-webkit-transform: translate(-50%, -50%);
			border-radius:6px;
		} */

		/*.smallBox{
			position:absolute;
			top:0;
			right:0;
			left:0;
			bottom:0;
			margin:auto;
			width:100px;
			height:100px;
			background:yellow;
			border-radius:6px;
		}*/

　　　　　　　　　　/*.smallBox{
　　　　　　　　　　　　　　position: absolute; 
　　　　　　　　　　　　　　top: 50%; left: 50%; 
　　　　　　　　　　　　　　margin-top: -50px;  
　　　　　　　　　　　　　　margin-left: -50px;  
　　　　　　　　　　　　　　width: 100px; height: 100px;
　　　　　　　　　　}*/

.smallBox{
　　　　　　　　　

width:100px;
height:100px;
background:red;
/* vh视窗高度 1vh相当于1% */
margin:50vh auto 0;
transform:translateY(-50%);


　　　　　　}
	</style>
</head>
<body>

	<div class="smallBox"></div>
	
</body>
</html>

　　

css3实现水平垂直

<!Doctype html>
<html>
<head>
	<title></title>

	<style>
		#load{ width:120px; height:140px;background:red; position:absolute;left:calc(50% - 60px); top:calc(50% - 70px);}
	</style>
</head>

<body>
 <div id="load"></div>
</body>
</html>

　　

posted @ 2016-04-25 20:00  mingjixiaohui  阅读(209)  评论(0)    收藏  举报