這邊的內容參考此網址 https://css-tricks.com/centering-css-complete-guide/
先分成兩個部分：水平置中、垂直置中
一、水平置中
1. inline element:
在父元素(block element)加上text-align: center;
2. block element
在此block element加上margin: 0 auto;
要注意的是此block element必須要有width
3. 多個block element
a. 可以改變為display: inline-block，並在父元素使用text-align: center;
b. 父元素使用flexbox。display: flex; justify-content: center;
二、垂直置中
1. inline element
1-1. 單行
a. 在此元素設定padding-top與padding-bottom為相同數值
b. 父元素設定line-height與height相同數值
1-2. 多行
a. 父元素display: table，子元素display: table-cell並vertical-align: middle;
或是在HTML的tag裡使用table與tr, td
b. 父元素使用flexbox。display: flex; flex-direction: column; justify-content: center;
c. 使用偽元素。如下所示：
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
}
增加一個不會顯示出來的inline-block，高度與容器相同，讓要置中的元素與它對齊
2. block element
2-1. block element有固定height
父元素position: relative; 子元素position: absolute; top: 50%; margin-top: -50px;
2-2 block element沒有固定height
父元素position: relative; 子元素position: absolute; top: 50%; transform: translateY(-50%);
2-3 使用flexbox
父元素 display: flex; flex-direction: column; justify-content: center;
