git 地址： https://gitee.com/renyangli123/bokeyuan.git
一、单列布局
（1）水平居中
水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）
//使用inline-block 和 text-align实现
//使用inline-block 和 text-align实现 //优点：兼容性好； //不足：需要同时设置子元素和父元素 <style media="screen"> .parent{ text-align: center; border: 1px solid #000; } .child{ display: inline-block; border:1px solid #000; } </style> <body> <div class="parent"> <div class="child"> 水平居中 </div> </div> </body>
//使用margin:0 auto来实现
优点：兼容性好
缺点: 需要指定宽度
.child{
200px; margin: 0 auto;
border: 1px solid #000;
text-align: center;
}
//使用table实现
优点:只需要对自身进行设置
不足:IE6,7需要调整结构
<style media="screen"> .child{ display: table; margin: 0 auto; border: 1px solid #000; } </style>
//使用绝对定位实现
不足：兼容性差,IE9及以上可用
<style media="screen"> .parent{position: relative;} .child{position: absolute;left: 50%; /*或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度*/ transform: translate(-50%) } </style>
//实用flex布局实现
缺点：兼容性差，如果进行大面积的布局可能会影响效率
<style media="screen"> /*第一种方法*/ .parent{display: flex;justify-content: center;} /*第二种方法*/ .parent{display: flex;} .child{margin: 0 auto;} </style>
(2) 垂直居中
// html <body> <div class="parent" style="height:80px;background:#f00;"> <div class="child"> 垂直居中 </div> </div> </body>
vertical-align,称之为“inline-block依赖型元素”只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用.
在使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;
<style media="screen"> /*第一种方法*/ .parent{display:table-cell;vertical-align:middle;height:80px;} /*第二种方法*/ .parent{display:inline-block;vertical-align:middle;line-height:80px;} </style>
// 使用绝对定位
<style media="screen"> .parent{position: relative;height: 80px;background: #f00;} .child{position: absolute;top: 50%;transform: translate(0, -50%)} </style>
// 使用flex实现
<style media="screen"> /* 使用flex实现 */ .parent{display: flex;align-items: center;} </style>
（3）水平垂直全部居中
<!-- 利用vertical-align,text-align,inline-block实现 --> <style media="screen"> .parent{ /* 500px; 需要设置一下宽度*/ display: table-cell;vertical-align:middle;text-align: center; } .child{display: inline-block;} </style>
<!--利用绝对定位实现--> <style media="screen"> .parent{position: relative;} .child{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)} </style>
<!--利用flex实现--> <style media="screen"> .parent{ display: flex; justify-content: center; align-items: center; } </style>