垂直居中的方法

最新推荐文章于 2024-11-12 23:16:45 发布

m0_57263755

最新推荐文章于 2024-11-12 23:16:45 发布

阅读量68

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_57263755/article/details/124600196

版权

本文介绍了两种方法将网页元素居中显示：1) 使用CSS的绝对定位，通过设置父级元素相对定位，子元素绝对定位并调整偏移量；2) 利用Flexbox弹性布局，通过`align-items: center`和`justify-content: center`实现内容居中。这两种方法简洁高效，适用于不同场景。

摘要由CSDN通过智能技术生成



<div class="main">	
   <div class="box1">
			
   </div>
</div>

1.使用绝对定位

<style>
	html,body{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;	
	}
			.main{
				/* 给父级增加相对定位 */
				position: relative;
				width: 100%;
				height: 100%;
				background-color: silver;
				
			}
			.box1{
				/* 使用绝对定位实现 */
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 200px;
				height: 200px;
				background-color: aquamarine;
			}
		</style>

效果如下

2.使用弹性布局

	.main{
		        display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				background-color:skyblue;
				
			}
			.box1{
				   width: 300px;
				    height: 300px;
					background-color: aquamarine;
			}

效果如下