其实如果父元素的height不确定，只需要把padding:10px 0;就能将子元素垂直居中。

如果父元素的高度写死了，就很难实现子元素居中了，但下面我还是提供了7种垂直居中的方法。

1.table自带功能

利用table自带功能，即<table></table>配合<tr></tr>、<td></td>实现

<table style="height: 400px; border: 1px solid red;"><tr><td style="border: 1px solid green;">一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊一大串字啊</td></tr>

</table> 

2.100%高度的after before加上inline-block

这种方法还有一种优化版本，请自行搜索哦。

 <span class=before></span><div class="child">一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字</div><span class=after></span></div> 

 border: 3px solid red;height: 600px;text-align: center;
}

.child{border: 3px solid black;display: inline-block;width: 300px;vertical-align: middle;
}

.parent .before{outline: 3px solid red;display: inline-block;height: 100%;vertical-align: middle;
}
.parent .after{outline: 3px solid red;display: inline-block;height: 100%;vertical-align: middle;
} 

怎么样？就像踩高跷一样，两边的span把中间的内容撑起来居中了！

3. div装成table

即css上加上display:table配合display:table-row和display:table-cell，vertical-align:middle

 <div class="table"><div class="td"><div class="child">一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字</div></div></div> 

div.table{display: table;border: 1px solid red;height: 600px;
}

div.tr{display: table-row;border: 1px solid green;
}

div.td{display: table-cell;border: 1px solid blue;vertical-align: middle;
}
.child{border: 10px solid black;
} 

4. 使用绝对定位配合margin

即使用绝对定位，先top:50%，再margin-top:居中元素高度一半的像素即可。相对的left:50%也是如此

 <div class="parent"><div class="child">一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字</div></div> 

.parent{height: 600px;border: 1px solid red;position: relative;
}
.child{border: 1px solid green;width: 300px;position: absolute;top: 50%;left: 50%;margin-left: -150px;height: 100px;margin-top: -50px;
} 

5. 使用绝对定位配合translate

即使用绝对定位，先top:50%,left:50%，再配合transform:translate(-50%,-50%)移回去

 <div class="parent"><div class="child">一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字</div></div> 

6. 使用绝对定位和margin:auto

 <div class="parent"><div class="child">一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字</div></div> 

.parent{height: 600px;border: 1px solid red;position: relative;
}
.child{border: 1px solid green;position: absolute;width: 300px;height: 200px;margin: auto;top: 0;bottom: 0;left: 0;right: 0;
} 

7.使用flex

即利用flex，即display:flex; justify-content:center; align-items:center;即可实现

 <div class="parent"><div class="child">一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字</div></div> 

.parent{height: 600px;border: 3px solid red;display: flex;justify-content: center;align-items: center;
}
.child{border: 3px solid green;width: 300px;
} 

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享