这里同时用非flex布局和flex布局两种方式来实现，可以对比两种实现方式的差异。
1.1用margin实现垂直居中实现方式：
父元素采用相对定位，子元素采用绝对定位，先将元素的定点定位到父元素的中心，再使用margin负值法，即子元素自身宽度、高度的一半，将其拉回到父元素的中心。
实现效果：
附上完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中--normal</title> <style type="text/css"> body { margin: 0; padding: 0; } .container { width: 500px; height: 300px; margin: 80px; border: 1px solid blue; position: relative; } .item { width: 300px; height: 200px; border: 1px solid red; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -100px; } </style> </head> <body> <div> <div></div> </div> </body> </html> 1.2用flex实现垂直居中实现方式：
父元素启用flex布局（display:flex），同时设置主轴上居中对齐（justify-content:center）、交叉轴上居中对齐（align-items:center）。子元素不需要额外设置样式。
实现效果：同上
附上完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中--flex</title> <style type="text/css"> body { margin: 0; padding: 0; } .container{ width:500px; height:300px; margin:80px; border:1px solid blue; display:flex; justify-content: center; align-items: center; } .item{ width:300px; height:200px; border:1px solid red; } </style> </head> <body> <div> <div></div> </div> </body> </html> 二．圣杯布局 2.1 普通方式实现圣杯布局在我之前的文章圣杯布局与双飞翼布局中详细介绍过如何实现一个圣杯布局：
(1)中间的三栏布局，这里采用margin负值法：两边两栏宽度固定，中间栏宽度自适应，左栏、右栏、中间栏向左浮动，左栏的margin-left设为-100%，中间栏的width设为100%，右栏的margin-left设为-右栏宽度。
(2)给container设置padding-left和padding-right属性，值分别为左栏、右栏的宽度；
(3)将左右两栏设置为相对定位，同时左栏的left值设为-左栏宽度，右栏的right设为-右栏宽度。
实现效果：
实现代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style type="text/css"> body { margin: 0; padding: 0; } header, footer { height: 100px; width: 100%; background-color: #bbbbbb; } .container { height: 300px; /* 圣杯布局 */ padding-left: 200px; padding-right: 300px; } .container div{ float: left; /* 圣杯布局 */ position:relative; } .left { width: 200px; height: 300px; background-color: #DC698A; margin-left: -100%; /* 圣杯布局 */ left:-200px; } .middle { width: 100%; height: 300px; background-color: #3EACDD; } .right { width: 300px; height: 300px; background-color: #8CB08B; margin-left: -300px; /* 圣杯布局 */ right:-300px; } </style> </head> <body> <header>头部</header> <div> <div>中间栏：内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div> <div>左栏</div> <div>右栏</div> </div> <footer>底部</footer> </body> </html> 2.2用flex实现圣杯布局实现方式：
(1)holyGrail启用flex布局，设置holyGrail中的header、container、footer在交叉轴上竖向排列（flex-direction:column;）
(2)container中的三栏布局：container启用flex布局，设置container中的middle、left、right在主轴上横向排列（flex-direction:row，默认值可以不设）。由于html中先写的middle，所以为了让left在最左边，要设置left的order为这三栏中最小的，即-1（其他两栏order为默认值0）
可以看出Flex布局的实现方式更加简单，也更加直观。
实现效果：同上
实现代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局--flex</title> <style type="text/css"> body { margin: 0; padding: 0; } .holyGrail{ display: flex; flex-direction: column; } header, footer { height: 100px; width: 100%; background-color: #bbbbbb; flex: 1; /*flex:1; === flex:1 1 auto;*/ } .container { height: 300px; display: flex; flex-direction: row;/*可不写，默认值*/ flex:1;/*需要可自动扩展*/ } .left { width: 200px; height: 300px; background-color: #DC698A; order:-1;/*左边栏放到最左边*/ } .middle { width: 100%; height: 300px; background-color: #3EACDD; flex:1; } .right { width: 300px; height: 300px; background-color: #8CB08B; } </style> </head> <body> <header>头部</header> <div> <div>中间栏：内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div> <div>左栏</div> <div>右栏</div> </div> <footer>底部</footer> </body> </html> 三.固定栏-可扩展栏页面布局实现效果：