我自己感覺，第四種比較常用
<title>無標題文檔</title>
<style>
.parent {
width:800px;
height:500px;
border:2px solid #000;
position:relative;
}
.child {
width:200px;
height:200px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-color: red;
}
.parent1 {
width:800px;
height:500px;
border:2px solid #000;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.child1{
width:200px;
height:200px;
display:inline-block;
background-color: red;
}
.parent2{
width:800px;
height:500px;
border:2px solid #000;
display:flex;
justify-content:center;
align-items:center;
}
.child2{
width:200px;
height:200px;
background-color: red;
}
.parent3 {
width:800px;
height:500px;
border:2px solid #000;
position:relative;
}
.child3 {
width:300px;
height:200px;
margin:auto;
position:absolute;/*設定水平和垂直偏移父元素的50%，
再根據實際長度將子元素上左挪回一半大小*/
left:50%;
top:50%;
margin-left: -150px;
margin-top:-100px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">第一種方法</div>
</div>
<div class="parent1">
<div class="child1">第二種方法</div>
</div>
<div class="parent2">
<div class="child2">第三種方法</div>
</div>
<div class="parent3">
<div class="child3">第四種方法</div>
</div>
</body>
</html>