CSS布局

[ 水平居中、垂直居中 ]

水平居中

子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。下面进行分析：

1、行内元素：对父元素设置text-align:center;

2、定宽块状元素: 设置左右margin值为auto;

3、不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;

4、通用方案: flex布局，对父元素设置display:flex; justify-content:center;

垂直居中

垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。

1、父元素一定，子元素为单行内联文本：设置子元素的height等于行高line-height

2、父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;

块状元素:设置子元素position:fixed（absolute），然后设置margin:auto;

通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。

[ 左中右布局（圣杯布局）]
涉及浮动和清除浮动，主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，它们实现的效果是一样的，差别在于其实现的思想。

圣杯布局
圣杯：父盒子包含三个子盒子（左，中，右）

中间盒子的宽度设置为 width: 100%; 独占一行；
使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；
.left {margin-left:-100%;} 把左边的盒子拉上去
.right {margin-left：-右边盒子宽度px;} 把右边的盒子拉上去
父盒子设置左右的 padding 来为左右盒子留位置；
对左右盒子使用相对布局来占据 padding 的空白，避免中间盒子的内容被左右盒子覆盖；

<div class="container">

<div class="middle">中间弹性区</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</div>
双飞翼布局
双飞翼：父盒子包含三个子盒子（左，中，右），中间的子盒子里再加一个子盒子。

中间盒子的宽度设置为 width: 100%; 独占一行；
使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行；
在中间盒子里面再添加一个 div，然后对这个 div 设置 margin-left 和 margin-right来为左右盒子留位置；

<div class="container">

<div class="middle">
<div class="middle-inner">中间弹性区</div>
</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</div>
圣杯和双飞翼异同
圣杯布局和双飞翼布局解决的问题是一样的，都是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

两种方法基本思路都相同：首先让中间盒子 100% 宽度占满同一高度的空间，在左右两个盒子被挤出中间盒子所在区域时，使用 margin-left 的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整避免中间盒子的内容被左右盒子遮挡。
主要区别在于 如何使中间盒子的内容不被左右盒子遮挡：
圣杯布局的方法：设置父盒子的 padding 值为左右盒子留出空位，再利用相对布局对左右盒子调整位置占据 padding 出来的空位；
双飞翼布局的方法：在中间盒子里再增加一个子盒子，直接设置这个子盒子的 margin 值来让出空位，而不用再调整左右盒子。
简单说起来就是双飞翼布局比圣杯布局多创建了一个 div，但不用相对布局了，少设置几个属性。