css水平垂直居中的几种方式

css水平垂直居中的几种方式

方法一：绝对定位+ transition: translate(-50%,-50%)

div{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

方法二：绝对定位+margin值减去盒子的一半

div{
	width: 100px;
	height: 100px;
	postion: absolute;
	top: 50%;
	margin：auto;
	margin-top: -50px;
}

方法三：绝对定位 上下左右都设置为0 + margin: auto;

div{
	postion: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}

方法四：flex布局 给当前div的父级添加flex

div{
	display: flex;
	align-item: center;
	justify-content: center;
}

方法五：display： table-cell 实现水平垂直居中：table-cell middle center组合使用

div{
	display： table-cell;
	vertical-align: middle;
	text-align: center;
}