实现子div水平居中显示

2018-12-13 dingshangchao CSS样式表

实现子div水平居中显示,实现图示效果

1544689165(1).png

<style type="text/css">
	.parent{
		background-color: grey;
		width: 500px;
		height:20px;
	}
	.child{
		background-color: red;
		height:20px;
	}
</style>

方法一:


.parent{
	text-align: center;
}
.child{
	display: inline-block;
} 


方法二:


.child{
	display: table;
	margin: 0 auto;
}
方法三:



.parent{
	position: relative;
} 
.child{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
} 


方法四:

.parent{
	display: flex;
	justify-content: center;
}


方法五:


.parent{
	display: flex;
}
.child{
	margin: 0 auto;
}












网站备案号:京ICP备11043289号-1 北京市公安局网络备案 海1101084571
版权所有 北京育灵童科技发展有限公司 Copyright © 2002-2024 www.elight.cn, All Rights Reserved