<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 利用 flex 来进行布局，百度可以看看 */
/* 方法一 align-items：垂直居中，justify-content:center 竖直居中 */
/*.parent{ display: flex;align-items: center;text-align: center;justify-content:center; }*/
/*.son{display: inline-block}*/
/*.parent{ display: flex;justify-content:center;}*/
/*.son{display: inline-block;align-self: center;}*/
/* 方法二 这种似乎子节点要宽高*/
.parent{position: relative}
.son{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto}
/* 方法三 */
/*.parent{display: table-cell;vertical-align: middle;text-align: center}*/
/*.son{display: inline-block;}*/
/* 方法四 */
/*.parent{position: relative}*/
/*.son{position: relative;top: 50%;left: 50%;*/
/*-webkit-transform: translate(-50%,-50%);*/
/*-moz-transform: translate(-50%,-50%);*/
/*-ms-transform: translate(-50%,-50%);*/
/*-o-transform: translate(-50%,-50%);*/
/*transform: translate(-50%,-50%);}*/
/* 方法五 */
/*.parent{ text-align:center; }*/
/*.parent:after{ display:inline-block; width:0; height:100%; vertical-align:middle; content:''; }*/
/*.son{ display:inline-block; vertical-align:middle; }*/
</style>
</head>
<body>
<div class="parent" style="width: 500px;height: 400px;border: 1px solid #ccc">
<div class="son" style="height: 200px;width: 300px;border: 1px solid #ddd">宽高不固定,让 son 在 parent 垂直竖直居中。</div>
</div>
</body>
</html>
