CSS常见布局问题整理

Posted 2020-08-04 杠子

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常见布局问题整理