首页 > 代码库 > CSS常见布局问题整理

CSS常见布局问题整理

2024-08-11 03:04:11   222人阅读

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


联系
我们