一个div在另一个div里垂直居中显示

最新推荐文章于 2023-11-03 20:38:10 发布

孤独的冥王星

最新推荐文章于 2023-11-03 20:38:10 发布

阅读量2.9k

点赞数 2

分类专栏： web 文章标签：垂直居中 div

原文链接：https://blog.csdn.net/hunannanhu/article/details/50482309?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommend

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文对比介绍了四种实现元素在页面中央对齐的方法：绝对定位+margin，table-cell+vertical-align，弹性盒模型flex，以及偏移50%。推荐flex方法，兼容性好，其余方法在不同场景下备用。

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

方法1：
通过设置子元素绝对定位和margin:auto

.parent {
		position:relative;
		width:800px;
		height:500px;
		border:2px solid #000;          
}

.child {
		position: absolute;
		width:200px;
		height:200px;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: red;
}

方法2：
设置父元素display:table-cell 和 vertical-align:middle;text-align: center;

.parent {
		width:800px;
		height:500px;
		border:2px solid #000;
		display:table-cell;
		vertical-align:middle;
		text-align: center;
}

.child {
		width:200px;
		height:200px;
		display:inline-block;
		background-color: red;
}

方法3：
设置父元素为弹性盒模型display:flex;，然后设置属性justify-content:center;align-items:center;

.parent {
		width:800px;
		height:500px;
		border:2px solid #000;
		display:flex;
		justify-content:center;
		align-items:center;
}

.child {
		width:200px;
		height:200px;
		background-color: red;
}

方法4：
设定水平和垂直偏移父元素的50%，再根据实际长度将子元素上左挪回一半大小

.parent {
		width:800px;
		height:500px;
		border:2px solid #000;
		position:relative;
}

.child {
		width:300px;
		height:200px;
		margin:auto;
		position:absolute;
		left:50%;
		top:50%;
		margin-left: -150px;
		margin-top:-100px;
		background-color: red;
}