善于利用postion让元素居中

最新推荐文章于 2022-08-02 09:43:03 发布

李小白cc

最新推荐文章于 2022-08-02 09:43:03 发布

阅读量953

点赞数

分类专栏： web前端文章标签： position居中垂直居中

本文链接：https://blog.csdn.net/qq_43390061/article/details/88178504

版权

web前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

我们都知道文字和行内块级元素（可以理解为即支持宽高的行内元素或不独占一行的块级元素）可以直接使用父级的text-align:cente水平r居中。但是怎么让块级元素水平居中，垂直居中这是一个值得思考的问题，其实有很多实际的项目里面经常需要用到垂直居中，所以我今天教小白们一个简单实用的方法。
我们知道position有5个值，其中的absolute用来绝对定位的（相对于position:relative的元素）我们只需要给需要居中的元素一个absolute和它相对居中的元素relative即可，然后给该元素top设置为0，bottom设置为0，此时该元素将不会有任何变化，但是我们只需要加上margin:auto它就会垂直居中（该方法基本适于于任何元素）。我们来看看实例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现垂直居中的实用方法</title>
		<style>
			.box{
				width: 200px;
				height: 200px;
				background-color: pink;
				position:relative;
			}
			.box_small{
				width: 50px;
				height: 50px;
				background-color: orange;
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box_small"></div>
		</div>
	</body>
</html>

效果图：
在这里插入图片描述
这样就实现了垂直居中，此时我们也可以类推，给该元素再加上 left0 right0，它将水平也居中
完整版的效果如下

此方法几乎适用于任何元素，并且position后会自动将行内元素也转换为块级元素（行内元素也能用此方法）。这样写出来的定位始终是在最中间（按照需求也可以只是垂直居中或者水平居中）不随大盒子的变化而变化，但是此处有个地方需要注意：一定要给元素固定宽高，不然会对应的占满整个父元素，如果我们不给宽，将看到如下现象：
在这里插入图片描述
这点要注意。同时这点也是可以利用的，比如我想让一个盒子盖满另一个盒子就可以不设置宽高，然后top,right,bottom,left都设置0即可，一屏网页或者网页提示以及手机网页广告可以使用（可以自己动手试验一下）。好了，今天就写这么多了，每天分享一个简单的demo或知识点，循序渐进（近段时间主要先写css，后面会写js以及框架的，很漫长，虽然每天在上班，但我会继续坚持写。），希望能够帮助小白在梦想的道路上提供一点点小小的帮助。加油，用实力撑起梦想！