垂直水平居中方案

目录

 

CSS2两列布局

CSS2三列布局

CSS2三列布局之圣杯布局

CSS2三列布局之双飞翼布局

CSS2垂直水平居中问题

水平居中 

垂直水平居中

---

CSS2两列布局

商品列 注意 要给right开启BFC

body{ min-width: 400px; }
#left{width: 200px;height: 100px;background: pink;float: left;}
#right{height: 100px;background: deeppink;
/*注意：要给right开启BFC做一个干净的两列布局的关键*/
  overflow: hidden;}

什么是BFC?

• BFC（Block Formatting Context）直译为“块级格式化上下文”。它是一个独立的渲染区域，只有块级盒子参与， 它规定了内部的Block-level Box 如何布局，并且与这个区域外毫不相干

BFC布局规则

1. 内部的Box会在垂直方向，一个接一个的放置
2. BFC的区域不会与float box重叠。
3. 内部的Box垂直方向的距离由margin决定。属于同一个BFC的相邻Box的margin会发生重叠
4. 计算BFC的高度时，浮动元素也参与其中计算，（清除浮动 haslayout）
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

BFC什么时候出现（哪些元素会生成BFC）

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. overflow不为visible
5. display为inline-block,table-cell,table-caption,flex,inline-flex

CSS2三列布局

CSS2三列布局之圣杯布局

    1.两边固定  当中自适应
    2.当中列要完整显示
    3.当中列要优先加载

*{margin:0;padding:0;}
div{height:100px;} 

/*浮动:	搭建完整的布局框架*/
/*.middle{float: left;background: green;} 宽度没有的话，width会为0*/
.middle{float: left;background: green;width:100%;}
.left,.right{background: pink;width:200px;}

/*margin 为负值:调整旁边两列的位置(使三列布局到一行上)，此时中间列并不能完全显示*/
.left{float: left;margin-left: -100%;}
.right{float: left;margin-left: -200px;}

/*将外部的content内边距设为左右各为200px*/
#content{padding: 0 200px;}

/*两边设置相对定位，分别向左向右移动200px*/
.left{position: relative;left: -200px;}
.right{position: relative;right: -200px;}

以上，圣杯布局完工~

CSS2三列布局之双飞翼布局

两组实现的对比:
        1.俩种布局方式都是把主列放在文档流最前面，使主列优先加载。
        2.两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
        3.两种布局方式的不同之处在于如何处理中间主列的位置：
                圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
                双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

  
middle

.m-inner{padding: 0 200px;}

以上，双飞翼完工~

CSS2垂直水平居中问题

水平居中 

#test{
	width: 200px;
	height: 200px;
	line-height: 200px;/*文字垂直方向居中*/
	background: pink;
	margin: 0 auto;/*块元素水平方向居中*/
	text-align: center;/*文字水平方向居中*/
}

垂直水平居中

已知高度的元素水平垂直居中方案height:100px width:100px

        方案一：position:absolute; lt:50%; ml,mr:-50px

#inner{position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;
    width: 100px;height: 100px;background: deeppink;  }

  绝对定位盒子的特性
            高宽有内容撑开
            水平方向上：   left + right + width + padding + margin = 包含块padding区域的尺寸
                                     0        0           100        0                0            400
            垂直方向上：   top + bottom + height + padding + margin = 包含块padding区域的尺寸
                                    0          0              100          0                 0            600

         方案二：position:absolute;lrtb:0;margin:auto;

#inner{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;
width: 100px;height: 100px;background: deeppink;}

未知高度的垂直水平居中方案(包含块一定的是容器) （绝对定位盒模型的特性）

position:absolute;lt:50%;transform:translate3d(-50%,-50%,0);

#inner{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);background:deeppink;}

flex垂直方案

#parent {
display: flex;
justify-content: center;
align-item: center;
}

图片垂直水平居中