CSS問題彙總

垂直水平居中問題

都拿下面這個div說事，咱們但願son在它的父容器dad裏垂直居中，dad設定爲和設備同樣寬高的容器，爲了方便形容，基礎樣式寫在public-*上，後續實現都在dad 和 son裏實現。

<div class="public-dad dad">
    <div class="public-son son">我是son</div>
</div>
複製代碼

.public-dad{
    height: 100vh;
    width: 100vw;
    background: antiquewhite;
}
.public-son{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    background: lightpink;
}
複製代碼

最終要實現如圖效果：

先來講說不用給son設定固定寬高的方法：

1. flex實現

給父親的display設置成flex，並追加橫軸、縱軸分佈設定：

.dad{
    display: flex;
    justify-content: center;
    align-items: center;
}    
複製代碼

雖然它很好用，但它有兼容性問題。

2. position + 位移 實現

.dad{
    position: relative;
}
.son{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
複製代碼

它也有兼容性問題

3. position + margin:auto 實現

.dad{
    position: relative;
}
.son{
    position: absolute;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
}
複製代碼

這個方法看起來實在摸不清頭腦，看了篇解釋是說，去掉margin: auto後，son會佔滿父元素，而margin: auto會自動計算son的margin到父元素padding的距離做爲son外邊距。實際上也就是son的content+padding+border+margin會佔滿父元素。

接下來講說必須給son設置固定寬高才能實現的方法：

4. position + margin 實現

.dad{
    position: relative;
}
.son{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;  /*必須知道寬高，若是寫50%，指的是父元素的50%*/
    margin-left: -100px;
}
複製代碼

5. position + calc計算 (愚蠢方法，不推薦)

.dad{
    position: relative;
}
.son{
    position: absolute;
    margin: auto;
    top: calc((100% - 200px) / 2);
    left: calc((100% - 200px) / 2);
}
複製代碼

手動計算top和let的位置。