两种以上方式实现已知或者未知宽度的垂直水平居中

最新推荐文章于 2024-09-20 13:42:43 发布

笑望灬星辰

最新推荐文章于 2024-09-20 13:42:43 发布

阅读量125

点赞数

本文链接：https://blog.csdn.net/hu1628299958/article/details/115619685

版权

css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

两种以上方式实现已知或者未知宽度的垂直水平居中

/** 1 **/
.wraper {
 	position: relative;
 	.box {
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		width: 100px;
 		height: 100px;
 		margin: -50px 0 0 -50px;
 	} 
}
/** 2 **/
.wraper {
 	position: relative;
 	.box {
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 	} 
}
/** 3 **/
.wraper {
 	.box {
 		display: flex;
 		justify-content:center;
 		align-items: center;
 		height: 100px;
 	} 
}
/** 4 **/
.wraper {
 	display: table;
 	.box {
 		display: table-cell;
 		vertical-align: middle;
 	} 
}