HTML元素的五大居中方法

最新推荐文章于 2023-02-18 18:42:34 发布

AndyWangWangWang

最新推荐文章于 2023-02-18 18:42:34 发布

阅读量3.5k

点赞数 13

本文链接：https://blog.csdn.net/andywangwangwang/article/details/99763488

版权

分享几个我所了解的居中方法，欢迎大家来补充…
一、五大居中之定位居中

<style>
	//去除body的margin和padding值
	*{margin: 0;padding: 0;}
	
	//已知元素的宽高，给 #box 元素设置上下 margin 为 50px（50px可以为任何像素也可以不写，默认为 0） 左右auto自动居中，这样父元素 #box 在body里面就左右居中了，设置一个相对定位position:relative;给子元素定位做参照。
	//或给html,body设置宽高为100%，position:relative;相对定位，给#box元素设置position:absolute;绝对定位，left:0;right:0;top:0;bottom:0;margin:auto;（设置上下左右都为0,marign为auto(auto代表自动）），这样就可以实现 #box 水平和垂直都居中了
	#box{width:400px;height:400px;border:1px solid #000;margin:50px auto;position:relative;}
	
	//已知元素的宽高，给#box下面的.zi元素设置position:absolute;绝对定位，设置上下左右都为0,marign为auto(auto代表自动），这样就可以实现 #box 下面的 .zi 元素水平和垂直都居中了
  	#box .zi{width:100px;height:100px;background:#0f0;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;}
</style>

<body>
	//创建一个父元素div id名为box
	<div id="box">
	
	//在父元素里面创建一个子元素div class名为zi
		<div class="zi"></div>
	</div>
</body>

二、五大居中之定位 + 百分比 + margin值居中

<style>
	//去除body的margin和padding值
	*{margin: 0;padding: 0;}
	
	//已知元素的宽高，给 #box 元素设置上下 margin 为 50px（50px可以为任何像素也可以不写，默认为 0） 左右auto自动居中，这样父元素 #box 在body里面就左右居中了，设置一个相对定位position:relative;给子元素定位做参照。
	//或给html,body设置宽高为100%，position:relative;相对定位，给#box元素设置position:absolute;绝对定位，left:50%;top:50%;margin:-200px  0  0  -200px;（设置左上为50%,marign为自身宽高负的一半（margin值不固定，根据自身的宽高来定）），这样就可以实现 #box 水平和垂直都居中了
	#box{width:400px;height:400px;border:1px solid #000;margin:50px auto;position:relative;}
	
	//已知元素的宽高，给#box下面的.zi元素设置position:absolute;绝对定位，left:50%;top:50%;margin:-50px  0  0  -50px;（设置左上为50%,marign为自身宽高负的一半（margin值不固定，根据自身的宽高来定）），这样就可以实现 #box 下面的 .zi 元素水平和垂直都居中了
	.zi{width:100px;height:100px;background:#0f0;position:absolute;left:50%;top:50%;margin:-50px 0 0 -50px;}
</style>
<body>
	//创建一个父元素div id名为box
	<div id="box">
	
	//在父元素里面创建一个子元素div class名为zi
		<div class="zi"></div>
	</div>
</body>

三、五大居中之定位 + 百分比 + transform:translate 居中

<style>
	//去除body的margin和padding值
	*{margin:0;padding: 0;}
	
	//已知元素的宽高，给 #box 元素设置上下 margin 为 50px（50px可以为任何像素也可以不写，默认为 0） 左右auto自动居中，这样父元素 #box 在body里面就左右居中了，设置一个相对定位position:relative;给子元素定位做参照。
	//或给html,body设置宽高为100%，position:relative;相对定位，给 #box 元素设置position:absolute;绝对定位，left:50%;top:50%;transform:translate(-50%,-50%);（设置左上为50%;transform:translate为自身宽高负的50%），这样就可以实现 #box 水平和垂直都居中了
	#box{width:400px;height:400px;border:1px solid #000;margin:50px auto;position:relative;}
	
	//已知元素的宽高，给#box下面的.zi元素设置position:absolute;绝对定位，left:50%;top:50%;transform:translate(-50%,-50%);（设置左上为50%;transform:translate为自身宽高负的50%），这样就可以实现 #box 下面的 .zi 元素水平和垂直都居中了.zi{width:100px;height:100px;background:#0f0;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
</style>
<body>
	//创建一个父元素div id名为box
	<div id="box">
	
	//在父元素里面创建一个子元素div class名为zi
		<div class="zi"></div>
	</div>
</body>

四、五大居中之弹性盒居中

	//justify-content:center;align-items:center：设置在父类容器上，作用在子元素上
<style>
	//去除body的margin和padding值
	*{margin:0;padding: 0;}
	
	//已知元素的宽高，给 #box 元素设置上下 margin 为 50px（50px可以为任何像素也可以不写，默认为 0） 左右auto自动居中，这样父元素 #box 在body里面就左右居中了。
	//或给html,body设置宽高为100%，display:flex;（开启弹性盒）justify-content:center;（左右水平居中）align-items:center（上下垂直居中），这样就可以实现 #box 水平和垂直都居中了
	#box{width:400px;height:400px;border:1px solid #000;margin:50px auto;display:flex;justify-content:center;align-items:center;}
	
	//已知元素的宽高，给#box元素设置display:flex;（开启弹性盒）justify-content:center;（左右水平居中）align-items:center（上下垂直居中），这样就可以实现 #box 下面的 .zi 元素水平和垂直都居中了。
	.zi{width:100px;height:100px;background:#0f0;}
</style>

<body>
	//创建一个父元素div id名为box
	<div id="box">
	
	//在父元素里面创建一个子元素div class名为zi
		<div class="zi"></div>
	</div>
</body>

五、五大居中之伪元素（行内块方法）居中

<style>
	//去除body的margin和padding值
	*{margin:0;padding: 0;}
	
	//已知元素的宽高，给 #box 元素设置上下 margin 为 50px（50px可以为任何像素也可以不写，默认为 0） 左右auto自动居中，这样父元素 #box 在body里面就左右居中了，设置 text-align:center，让 #box 的行内块属性的子元素左右（水平）居中。
	#box{width:400px;height:400px;border:1px solid #000;margin:50px auto;text-align:center;}
	
	//给 #box 设置一个行内块属性的伪元素，高度为 #box 的100%，vertical-align:middle（垂直居中）
	#box:after{content:"";display:inline-block;height:100%;vertical-align:middle;}
	
	//已知元素的宽高，设置属性为行内块，vertical-align:middle（垂直居中），因为父元素 #box 设置了 text-align:center，所以现在 #box 的子元素 .zi 在 #box 里面已经实现了水平垂直居中
	.zi{width:100px;height:100px;background:#0f0;display:inline-block;vertical-align:middle;}
</style>
</head>
<body>
	//创建一个父元素div id名为box
	//在父元素里面创建一个子元素div class 名为 zi ，如果换行会有 3px ~ 5px 间隙
	<div id="box"><div class="zi"></div></div>
</body>

AndyWangWangWang

关注

13
点赞
踩
11

收藏

觉得还不错? 一键收藏
8
评论
HTML元素的五大居中方法

分享几个我所了解的居中方法，欢迎大家来补充…一、五大居中之定位居中<style> //去除body的margin和padding值 *{margin: 0;padding: 0;} //已知元素的宽高，给 #box 元素设置上下 margin 为 50px（50px可以为任何像素也可以不写，默认为 0）左右auto自动居中，这样父元素 #box 在body里面就左右居中...
复制链接

扫一扫