html中水平居中的方法

第一种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css">
         <!--第一种 定位+margin值--> 
			*{
			     padding: 0px;
			     margin: 0px;
			  }
		 	p{
			  width: 100px;
			  height: 100px;
			  top:50%;
			  left: 50%;
			  background: #00FFFF;
			  position: fixed;
			  margin-top:-50px;
			  margin-left: -50px;
			} 
      </style>
</head>
	<body>
		<p></p>
	</body>
</html>

第二种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			p{
	<!--第二种方法 定位+transform -->
			width: 100px;
			height: 100px;
			top:50%;
			left: 50%;
			background: #00FFFF;
			position: fixed;
			transform: translate(-50px,-50px);
			}
	</style>
</head>
	<body>
		<p></p>
	</body>
</html>

第三种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			p{
			   width: 100px;
			   height: 100px;
			   top:0;
			   left: 0;
			   right: 0;
			   bottom: 0;
			   margin: auto;
			   background: #00FFFF;
			   position: fixed;
			}
	</style>
</head>
	<body>
		<p></p>
	</body>
</html>

第四种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				 
			}
			html,body{
				width:100%;
				height: 100%;
			}
			p{
			   width: 100px;
			   height: 100px;
			   margin: auto;
			   background: #00FFFF;
			  
			}
			body{display: flex;}
	</style>
</head>
	<body>
		<p></p>
	</body>
</html>

在这里插入图片描述

版权声明：本文为weixin_44974676原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。