CSS常見布局問題整理

標籤：

1. 實現div的水平置中和垂直置中
2. 多元素水平置中
3. 實現柵格化布局

 1. 實現div的水平置中和垂直置中

實現效果:

 

這大概是最經典的一個題目了,所以放在第一個. 方法有好多, 一一列來

主要思路其實就是

1. 使用position,相對父元素做絕對位置(設定百分比[由父元素寬高調節子項目大小]/設定margin和相對位置(確定寬高))
2. 使用flex屬性
3. 使用tranfrom做相對位移的調節

1) 只適用: 寬高已定

設定position: absolute(父元素記得設定: relative), 然後top和left設定50%, 50%, 再設定margin-left=寬/2, margin-top:寬/2

        .div1{            width:500px;            height:500px;            border:1px solid black;            position: relative;     /*很重要,不能忘*/        }        .div2{            background: yellow;            width:300px;            height:200px;            margin-left:-150px;            margin-top:-100px;            top:50%;            left:50%;            position: absolute;

2) 只適用: 固定寬高; 如果寬高隨意,想靠內部撐開的話, 會佔滿整個父div 

依然是利用position：子div的上下左右都設定成0，然後margin設定auto。關鍵是要設定position：子absolute，父relative。

        .div1{            width:500px;            height:500px;            border:1px solid black;            position: relative;     /*很重要,不能忘*/        }        .div2{            background: yellow;            width:300px;            height:200px;            margin:auto;            bottom: 0;            top:0;            left:0;            right:0;            position: absolute;

3) 適用: 不論是否固定寬高都可用. 問題在於相容性. ie9及以下不支援

設定父級flex屬性: display:flex; justify-content:center; align-items: center; 

這種方法在子級div有多個時也可以實現置中----具體看flex屬性設定

        .div1{            width:500px;            height:500px;            border:1px solid black;            display: flex;            justify-content: center;　　/*使垂直置中*/            align-items:center;　　　　/*使水平置中*/                    }        .div2{            background: yellow;            /*width:300px;            height:200px;*/        }

4) 適用: 要設寬度, 否則會使得寬度為父級div的寬度

父級元素設定display:table-cell ，然後vertical-align：middle。這種方法可以設定垂直置中. 這時候只要在子項目裡設定margin:auto即可實現水平置中

但是這種方法好像會使父元素的置中無效。

        .div1{            width:500px;            height:500px;            border:1px solid black;            display:table-cell;            vertical-align: middle;                    }        .div2{            background: yellow;            width:300px;            /*height:200px;*/            margin:auto;        }

5) 適用: 可不指定寬高

使用transform置中. 設定父級position:relative; 子級position:absolute. 然後top: 50%; left:50%; transform:translate(-50%,-50%)

        .div1{            width:500px;            height:500px;            border:1px solid black;            position: relative;        }        .div2{            background: yellow;            position: absolute;            /*width:200px;*/            top:50%;            left:50%;            transform:translate(-50%,-50%);        }

6) 適用: 指定寬高百分比

保證left和right的百分數一樣就可以實現水平置中，保證top和bottom的百分數一樣就可以實現垂直置中。但是這種方法不能由內部元素自動調節div的寬高，而是通過父元素大小控制的

        .div1{            width:500px;            height:500px;            border:1px solid black;            position: relative;        }        .div2{            background: yellow;            position: absolute;            left: 30%;            right: 30%;            top:40%;            bottom: 40%;        }

7) 使用display:inline-block加虛擬元素

        .div1{            width:600px;            height:200px;            border:1px solid black;            text-align: center;        }        .div1:after{            content:"";            display: inline-block;            vertical-align: middle;            height: 100%;        }        .div2{            background: black;            color:white;            display: inline-block;        }

box 容器通過 after或者before 產生一個高度 100% 的「備胎」，他的高度和容器的高度是一致的，相對於「備胎」垂直置中，在視覺上表現出來也就是相對於容器垂直置中了

 

參考: 怎麼實現div的水平置中和垂直置中

 

2. 多元素水平置中

效果:

 

1) 把子級div設定成display:inline-block; 然後父級div設定text-align:center;

/**base style**/div{  background:#000;  color:#fff;  height:50px;  width:50px;  text-align:center;  line-height:50px;  margin-left:10px;}/**start here**/main{  text-align:center;}div{  display:inline-block;  *display:inline;/*hack IE*/  *zoom:1;/*hack IE*/}

一個實現效果

2) 更方便靈活的做法還是使用flex-box, 設定水平置中 justify-content: center

main{  display:flex;  justify-content:center;}

 

3. 實現柵格化布局

使用flex,

.parent{  display: flex;  flex-direction: column;　　/*按列的順序*/  flex-wrap: wrap;　　/*可換行*/  height: 440px;  width: 660px;}

 

參考:  CSS常見布局問題整理

CSS常見布局問題整理