CSS常見佈局問題整理 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常見佈局問題整理