基本上常用的就這四種：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/*方法一：1）將父級容器設置爲：*/
.gao{
/* display:table-cell;
vertical-align:middle;
text-align:center;
width:100px;
height:100px;
background: #ddd;
} */
/*方法二：2)使用flex*/
/* .gao{
display: flex;
justify-content: center;
align-items: center;
width:100px;
height:100px;
background: #ddd;
} */
/*方法三：*/
/* .test{
position: absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
width:100px;
height:100px;
border: 1px solid #aaa;
}*/
/*方法四：*/
/*.test{
position: absolute;
left:50%;
top:50%;
width:100px;
height:100px;
background: #ddd;
transform: translateY(-50%) translateX(-50%);
}*/
</style>
</head>
<body>
<div class="gao">
<div class="test">dsfdsf</div>
</div>
</body>
</html>
