CSS問題彙總

conqorld發表於2019-04-25
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;
}
複製程式碼

最終要實現如圖效果：

CSS問題彙總

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

  1. flex實現

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

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

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

  1. position + 位移 實現
.dad{
    position: relative;
}
.son{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
複製程式碼

它也有相容性問題

  1. 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設定固定寬高才能實現的方法：

  1. position + margin 實現
.dad{
    position: relative;
}
.son{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;  /*必須知道寬高，如果寫50%，指的是父元素的50%*/
    margin-left: -100px;
}
複製程式碼
  1. position + calc計算 (愚蠢方法，不推薦)
.dad{
    position: relative;
}
.son{
    position: absolute;
    margin: auto;
    top: calc((100% - 200px) / 2);
    left: calc((100% - 200px) / 2);
}
複製程式碼

手動計算top和let的位置。

相關文章