flex布局方案positionmarginlayoutschemegrid布局方案1.flex布局方案(1)块级元素水平居中，垂直居中body{display:flex;对齐项目：居中；/*定义body元素垂直居中*/justify-content:center;/*定义body中元素的水平居中*/}.content{width:300px;高度：300px；背景：橙色；}(2)三列layout.container{display:flex;}.left{order:-1;flex-basic:200px;/*row为主轴时flexitem的宽度*/}.right{flex-basic:300px;}.main{flex-grow:1;}/*相对比例大小。*/2。positionmargin布局方案(1)块级元素水平和垂直居中content{margin-top:-50%ofheight;<--伪代码-->position:relative;top:50%;<--或者使用transform:translateY(50%);-->}(2)三列layout.container{position:relative;}.left{position:absolute;left:0;}。right{position:absolute;right:0;}.main{margin:}/*设置margin的长度以适应左右模块。*/###3。网格布局方案
