html中水平居中的方法

卓 zoey

已于 2022-06-24 17:35:00 修改

阅读量2.3k

点赞数 1

分类专栏： HTML 文章标签： html

于 2020-07-07 21:18:42 首次发布

本文链接：https://blog.csdn.net/weixin_44974676/article/details/107190595

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第一种

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

在这里插入图片描述

卓 zoey

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html中水平居中的方法

第一种<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">  *{ padding: 0px; margin: 0px; } p{
复制链接

扫一扫

专栏目录