水平垂直居中

水平垂直居中

通过绝对定位

.center{
	width: 100px;
	height: 100px;
	background-color: red;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -50px;
	margin-top:-50px;
}

该种方式要求元素必须要有明确的宽高

translate

.center{
	background-color: red;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

该种方式不需要元素拥有明确的宽高。translate为百分数时相对于自身border区域宽高

视口

.center{
	width: 50px;
	background-color: red;
	margin: 50vh auto 0;
	transform: translateY(-50%);
}

该种方式只适用于元素在视口中居中。且元素要有明确的宽度，因为需要通过左右margin为auto来实现元素水平居中

单位‘vw’与’vh’与视口宽/高相关。1vw/vh=50%*视口宽度/高度

伸缩布局

给这个待居中元素的父元素设置‘display:flex’(下列例子中为body)，再给居中元素自身设置‘margin:auto’。甚至居中元素需要明确的宽高

.center{
	margin: auto;
	width: 100px;
	background-color: red;
}