CSS面试须知--水平、垂直居中以及三栏布局

水平居中

块级盒子水平居中

• 可以让一个块级盒子实现水平居中必须：
  • 盒子必须指定了宽度（width）
  • 然后就给左右的外边距都设置为auto，

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:200px; margin:0 auto;}

绝对定位的盒子居中

注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。
解决：

1. `left: 50%;`：让**盒子的左侧**移动到**父级元素的水平中心位置**；
2. `margin-left: -100px;`：让盒子**向左**移动**自身宽度的一半**。

边偏移需要和定位模式联合使用，单独使用无效；

1. top 和 bottom 不要同时使用；
2. left 和 right 不要同时使用。

由此延伸到CSS3的tranform属性的translate

其中 margin-left: -100px;可以替换为transform: translate (a,b)

文字水平居中

盒子内的文字水平居中是 text-align: center,

• 此方法还可以让 行内元素和行内块居中对齐 ，由此可以想到：有时候可以把某些块级元素转化为行内块或行内元素 （使用display属性）

垂直居中

vertical-align 垂直对齐

1. vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，

2. 特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

vertical-align : baseline |top |middle |bottom 

默认与文字基线对齐
应用： 去除图片底侧空白缝隙
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会导致图片底侧会有一个空白缝隙。
解决方法：
1 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
2. 给img 添加 display：block; 转换为块级元素就不会存在问题了。

不管是水平居中还是垂直居中，FLEX布局几乎是万能！

三栏布局

1. margin负值法：左右盒子都设置为左浮动，且采用负的margin值。中间盒子被宽度为100%的浮动元素包起来
   圣杯布局 和双飞翼布局
   两者的优点：能够使中间栏部分优先加载
   两者的相同点：都是通过设置负margin来实现元素的排布，
   两者的相同点：html结构的差异，双飞翼是在center元素内部又设置了一层inner-center的元素并设置它的左右margin，而圣杯布局是通过设置padding，来解决两边盒子的覆盖。

2. 自身浮动法：左盒子左浮动，右盒子右浮动，中间盒子放最后（不给宽，自适应）

3. 绝对定位：左右两个盒子采用绝对定位，分别定位于页面的左右两侧，中间的主盒子用左右margin值撑开距离。

4. flex布局： 左右盒子固定宽 中间盒子 flex：1 （高度由内容决定）

5. 网格布局： 给父亲设置 display:grid

知识点内容来自教学视频，自己总结归纳。