面试题之css盒子水平垂直居中

1. 定位

（1）要求子盒子宽高已知

position: absolute，先top: 50%;left: 50%;将整个子盒子移到父盒子的中间(盒子左上角)，再将盒子向上和向左移动分别移动子盒子高度的一半 和宽度的一半。

.father {
   position: relative;
}
.son {
   width: 70px;
   height: 70px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -35px;
   margin-left: -35px;
}

（2）要求子盒子有宽高，但不要求具体数值

子盒子上下左右都设置为0，即上下左右距离都是一样的，再margin: auto;，像是把盒子挤到中间

.father {
	position: relative;
}
.son {
	width: 70px;
	height: 70px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

（3） transform，不要求子盒子具有宽高

position: absolute，先top: 50%;left: 50%;将整个子盒子移到父盒子的中间(盒子左上角)，再将盒子向上和向左移动分别移动子盒子高度的一半 和宽度的一半。

.father {
   position: relative;
}
.son {
   width: 70px;
   height: 70px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

2. flex

(1) 水平轴x轴为主轴

.father {
	display: flex;
	justify-content: center;
	align-items: center;
}

(2) 垂直轴y轴为主轴

.father {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

3. grid

.father {
	display: grid;
}
.son {
	justify-self: center;
	align-self: center;
}

4. table-cell

display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding的设置，表现几乎类似一个td元素。

.father {
	display:table-cell;
	vertical-align: middle;  //垂直居中
	text-align: center;
}
.son {
	display: inline-block;
}

因为text-align这个属性对行内元素有效果，而son是盒子，为块元素，因此要通过display: inline-block;把子盒子变成行内块元素，text-align才会生效。

5. 效果