CSS-盒子水平垂直居中

CSS-水平垂直居中

//父容器设置宽高为500px，子容器200px
.father{
	height:500px;
	width:500px;
}
.son{
	box-sizing:boder-box;
	height:200px;
	width:200px;
}

已知宽度和高度的垂直水平居中

1.定位

// 定位
.father{
	position:relative;
}
.son{
	position:absolute;
	top:50%; //左上角在中间
	left:50%;
	margin-top:-250px; //往上移高的一半
	margin-left:-50px; //往左移宽的一半
}

2.定位(必须有宽高，但不考虑宽高）

.father{
	position:relative;
}
.son{
	position:absolute;
	top:0;
	left:0;
	right：0;
	bottom：0;
	margin：auto;
}

3.定位transform+translate

// 不需要具体宽高，但兼容性不好
//内容撑开多高，也能按真实高度，自己处理
.father{
	position:relative;
}
.son{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);//x,y
}

未知宽度和高度的垂直水平居中

1. flex布局

// 不需要具体宽高
.father{
	display:flex;
	justify-content:center;
	align-items:center;
}

2. table-cell

.father{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.son{
	display:inline-block;
}