CSS的水平與垂直置中

整理一些CSS置中的方式(其實網路上有很多了XD)
這邊的內容參考此網址 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;