L - 居中布局

coolpail 發布于2019-08-30 14:22 / 893人閱讀

摘要：水平居中先給出結構我是子元素方法將子元素轉換為行內元素將子元素設置為這樣既可以像塊元素一樣設置盒模型，又可以像行內元素一樣試用進行居中將子元素設置為后，子元素為塊級元素，寬度為內容寬度方法將子元素轉換為元素是塊級元素，寬度自適

水平居中

先給出HTML結構

    
        我是子元素

方法1. 將子元素轉換為行內元素

    .par{
        text-align: center;
    }
    .child{
        background-color: tomato;
            
        display:inline-block;
    }

將子元素設置為inline-block這樣既可以像塊元素一樣設置盒模型，又可以像行內元素一樣試用text-align：center進行居中

將子元素設置為inline-block后，子元素為塊級元素，寬度為內容寬度

方法2. 將子元素轉換為table

    .par{

    }
    .child{
        background-color: tomato;
            
        display:table;
        margin:0 auto;
    }

table元素是塊級元素，寬度自適應為內容寬度，所以通過display:table對子元素進行轉換并設置塊元素居中標配margin:0 auto

方法3. 使用position+transform組合

    .par{
        position: relative;
    }
    .child{
        background-color: tomato;
        width:300px;

        position: absolute;
        left:50%;
        transform: translateX(-50%);
    }

由于子元素是個塊級元素(div)，默認占滿父元素寬度，所以我們將子元素寬度設為300px

原理很簡單，先用絕對定位將子元素置于距父元素左邊界一半的位置，然后再將子元素向左移動自身的一半，達到居中效果

注意，position:relative將父元素設為子元素絕對定位的參照物

方法4. 利用flex布局的justify-content

    .par{
        display:flex;
        justify-content: center;
    }
    .child{
        background-color: tomato;
    }

由于flex-grow屬性默認值為0，flex-basis屬性默認值為auto，所以寬度為內容寬度(在沒有設置指定值時，否則為指定值)

順便說一句，flex很強大

垂直居中

高度為元素高度，就不指定具體值了

方法1. 父元素轉換為table-ceil

    .par{
        height:500px;

        display:table-cell;
        vertical-align:middle;
    }
    .child{
        background-color: tomato;
    }

子元素寬度為內容寬度，父元素寬度為子元素寬度

方法2. 利用position+transform組合

    .par{
        height:500px;

        position: absolute;
    }
    .child{
        background-color: tomato;
        width:300px;
        
        position: absolute;
        top:50%;
        transform: translateY(-50%);
    }

不指定子元素寬度的話，子元素的內容將縱向展示

方法3. 使用flex布局的align-items

    .par{
        height:500px;

        display:flex;
        align-items:center;
    }
    .child{
        background-color: tomato;
        width:300px;
    }

水平垂直居中

上述兩種居中布局的結合

方法1. 使用inline-block+text-align+table-cell+vertical-align

    .par{
        width:500px;
        height:500px;
        border:1px solid #ccc;

        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
    .child{
        background-color: tomato;
        width:300px;

        display:inline-block;
    }

方法2. 利用position+transform組合

    .par{
        width:500px;
        height:500px;
        border:1px solid #ccc;

        position: relative;
    }
    .child{
        background-color: tomato;
        width:300px;

        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
    }

方法3. 使用flex布局

    .par{
        width:500px;
        height:500px;
        border:1px solid #ccc;

        display:flex;
        justify-content: center;
        align-items: center;
    }
    .child{
        background-color: tomato;
        width:300px;
    }

有問題歡迎提問，實踐出真知

云服務器 GPU云服務器布局居中水平居中布局 Layout布局 linearlayout布局

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

轉載請注明本文地址：http://m.hztianpu.com/yun/115974.html

《css揭秘》下（偽元素，文字背景，垂直居中技巧，文字環繞）

摘要：本篇主要記錄揭秘一書中后面幾章的常用技巧。文字環繞的重點在于即文字圍繞著路徑來顯示。本篇主要記錄《CSS3揭秘》一書中后面幾章的常用技巧。 1、偽元素換行先看下HTML代碼，如下當愛的故事剩聽說我找不到你單純的面孔默認顯示效果：一般情況下，我們喜歡直接在第一個span元素后面加個換行符，但是它對于語義來說并不友好,或者將第一...

longmon 2019-04-23 13:14 評論0 收藏0
div+css圖片列表布局（一）

摘要：接下來我會以行列的圖片列表為列子介紹兩種常用的切圖方案布局布局首先來講布局的方法布局非常簡單，一般我會使用布局然后給每個元素定一個寬度并向左浮動。是不是很簡單詳細代碼可以參考下一篇文章圖片列表布局二關注作者吧前端切圖的時候經常會遇到圖片布局，初學者可能會比較生疏。接下來我會以3行3列的圖片列表為列子介紹兩種常用的切圖方案： showImg(https://segmentfault.c...

Travis 2019-08-30 13:20 評論0 收藏0
div+css圖片列表布局（一）

摘要：接下來我會以行列的圖片列表為列子介紹兩種常用的切圖方案布局布局首先來講布局的方法布局非常簡單，一般我會使用布局然后給每個元素定一個寬度并向左浮動。是不是很簡單詳細代碼可以參考下一篇文章圖片列表布局二關注作者吧前端切圖的時候經常會遇到圖片布局，初學者可能會比較生疏。接下來我會以3行3列的圖片列表為列子介紹兩種常用的切圖方案： showImg(https://segmentfault.c...

ThreeWords 2019-08-01 16:10 評論0 收藏0
css - 收藏集 - 掘金

摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...

phpmatt 2019-08-29 12:41 評論0 收藏0
FE.CSS-理解Matrix,Flex,Grid

摘要：理解中有這么幾個屬性方法斜拉縮放旋轉位移其實找到舊像素位置與新像素位置的關系就可以用表示。當網格項目多于網格中的單元格或網格項目放置在顯式網格之外時，將創建隱式軌道。理解transform:matrix matrix transform中有這么幾個屬性方法 skew(35deg)/*斜拉*/ scale(1, 0.5)/*縮放*/ rotate(45deg)/*旋轉*/ transl...

qujian 2019-08-30 15:55 評論0 收藏0