居中的几种方式

原创

陈业贵的博客 2021-11-16 15:52:57 博主文章分类：手机端大全解决 ©著作权

©著作权归作者所有：来自51CTO博客作者陈业贵的博客的原创作品，请联系作者获取转载授权，否则将追究法律责任

第一种：

<!doctype html> 
<html> 
<head> 
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;}
div{width: 100px;height: 100px;background: black;
	position: absolute;left: 50%;top: 50%;
	transform:translate(-50%,-50%);
}


    </style>
</head>

<body>
<div></div>

</body>
</html>

第二种：

<!doctype html> 
<html> 
<head> 
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;}
div{width: 100px;height: 100px;background: black;
	position: absolute;left: 50%;top: 50%;margin: -50px 0 0 -50px;
}


    </style>
</head>

<body>
<div></div>

</body>
</html>

第三种：

<!doctype html> 
<html> 
<head> 
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;}
body,html{height: 100%;}

div{width: 100px;height: 100px;background: black;
	position: fixed;
	left: 50%;top: 50%;
	margin-top: -50px;
	margin-left: -50px;
}


    </style>
</head>

<body>
<div></div>

</body>
</html>