css+div水平垂直居中布局总结（3种方案）

lucky111one

于 2017-11-17 17:49:37 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： div+css布局文章标签： css+div水平垂直居中布局

本文链接：https://blog.csdn.net/luckyone1111/article/details/78563909

div+css布局专栏收录该内容

5 篇文章

订阅专栏

本文介绍了三种实现子元素在父元素中水平垂直居中的方法：使用inline-block结合table-cell和vertical-align属性；利用absolute定位配合transform进行居中；采用flex布局通过justify-content和align-items属性实现居中。每种方案都有详细的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子元素于父元素水平垂直居中且其（子元素与父元素）高度均可变

方案一：inline-block + text-align + table-cell + vertical-align 优点：兼容性好

<div class="parent">
	<div class="child">文字</div>
</div>
<style>
	.parent{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	.child{
		display: inline-block;		
	}
</style>

方案二：absolute + transform 注：transform 为 CSS3 属性，有兼容性问题

<div class="parent">
	<div class="child">文字</div>
</div>
<style>
	.parent{
		position:relative;
		
	}
	.child{
		position:absolute;
		top: 50%;
		left: 50%;
		transition: translate(-50%,-50%);
	}
</style>

方案三：flex + justify-content + align-items 注：有兼容性问题

<div class="parent">
	<div class="child">文字</div>
</div>
<style>
	.parent{
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>