CSS居中方法總結

ralap 發布于2019-08-30 13:07 / 2748人閱讀

摘要：此時檢查元素即可即可實現內層的實現了居中這種方式是最為我們熟知的，其缺點是需要設置子元素的寬度。交叉軸居中當設置了屬性時，主軸的方向會改變。垂直居中實現方案用的屬性，以及定位，與上面的水平居中類似，只是改為即可。

水平居中實現方案 確定寬度的元素水平居中

1.我們可以通過給該元素的父級設置margin: 0 auto的方式來實現。
HTML:

CSS:

    .child {
      width: 200px;
      margin: 0 auto;
    }

此時檢查元素即可即可實現內層的div實現了居中,這種方式是最為我們熟知的，其缺點是需要設置子元素的寬度。
2.通過position定位
HTML:

  
    
      center

CSS:

   div {
      float: left;
      width: 100%;
      position: relative;
    }
    ul {
      position: absolute;
      left: 50%;
      width: 200px;
      margin-left: -100px;
    }

不確定寬度的元素居中

1.給子元素設置display: inline-black,父元素設置text-align: center。
HTML:

  
    
      center

CSS:

    div {
      text-align: center;
    }
    p {
      display: inline-block;
    }

2.當元素被設置float的時候,它的寬度就會被其內容撐開，然后通過positon定位來實現橫向居中。
HTML:

  
    
        center

CSS:

    div {
      float: left;
      width: 100%;
      position: relative;
    }
    ul {
      position: relative;
      left: 50%;
      float: left;
    }
    li {
      float: left;
      position: relative;
      right: 50%;
      display: block;
    }

3.flex布局， justify-content:center;主軸居中。align-items:center;交叉軸居中；當設置了flex-direction屬性時，主軸的方向會改變。
4.css width: fit-content屬性。
5.用css3的transform
HTML:


    
      center

CSS:

    div {
      position: relative;
    }
    .test {
      position: relative;
      left: 50%;
      float: left;
      transform: translateX(-50%);
    }

總結一下起來也就是兩種方式，其中有比較直接的方式比如，margin: 0 auto，雖然這種方式的兼容性很好，沒有副作用，但是這種方式最主要的缺陷是只適用于子元素寬度固定的情況。或者用css3的固有屬性flex布局或者 width: fix-content這種方式實現起來簡單直接，但在處理一些舊版本的瀏覽器時，存在很嚴重的兼容性問題。還有就是間接的實現方式通過position定位，具體思想主要是子元素先移動到父元素二分之一的位置，relative，或者absoulte都可以實現，然后在將子元素向左移動自身二分之一的位置，這種方式有廣泛的適用性，但是思路可能比較復雜。

垂直居中實現方案

1.用css3的transform屬性，以及postion定位，與上面的水平居中類似，只是改為top:50%,translateY(-50%)即可。
2.設置父元素display: table;子元素dispaly: table-cell,vertical-align: middle;
3.絕對定位
HTML:

  
    
      nnnnnnn

CSS:

    .parent {
      position: relative;
      height: 400px;
    }
    .child {
      margin: auto;
      height: 200px;
      position: absolute;
      top:0;
      bottom: 0;
    }

4.單行文本時可以設置height與line－height相同實現文字居中。
5.外邊距margin取負數，大小為width/height的一半，再加上top: 50%; left: 50%;

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115324.html

前端-CSS3&H5

摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

xiaolinbang 2019-08-29 14:14 評論0 收藏0
css居中總結

摘要：前言一直有個想法要把各種居中的方法總結一下，但還是一直沒有時間去整理。最近剛好在做樣式重構的項目，順便把一下自己有用過的或積累的居中方法給總結一下。又必須有個父級對其進行設置居中。前言一直有個想法要把各種居中的方法總結一下，但還是一直沒有時間去整理。最近剛好在做樣式重構的項目，順便把一下自己有用過的或積累的居中方法給總結一下。水平居中行內元素水平居中行內元素的居中比較簡單，直...

gxyz 2019-08-30 15:55 評論0 收藏0
對css居中的一點總結

摘要：為了更好的加深對居中的理解，搜集和閱讀相關資料，發現不錯的文章將其整理出來。在學習前端的過程中，發現元素和文本的水平居中和垂直居中，是經常會出現的問題，在實際工作中也會經常碰到。居中的技巧有很多，但在編寫代碼的過程中，發現有時候技巧管用，有時候不管用，于是就將每個知道的方案都試一遍，找到合適的。這種情況究其原因是對居中的認識不夠深入，只是停留在實現需求的水平上。為了更好的加深對居中的...

BenCHou 2019-08-29 11:17 評論0 收藏0
垂直居中相關知識總結

摘要：垂直居中相關知識總結前言工作中用到了很多關于垂直居中相關的知識之前，在上提問了個問題關于垂直居中，大家有沒有什么比較好的建議。垂直居中相關知識總結前言工作中用到了很多關于垂直居中相關的知識之前，在SF上提問了個問題CSS關于垂直居中，大家有沒有什么比較好的建議。非常感謝各位前輩對我的幫助，前輩們給的答案都非常多也各式各樣，我覺得有必要把大家的回答總結一下。方法總結一、絕對定...

Labradors 2019-08-19 17:31 評論0 收藏0