> 水平居中的第三种解决方案的优点和缺点

- 优点：

没想过。如果现在想想的话，我的答案是相比第二种解决方案来说，可以抵抗float布局的影响，不至于设置float布局后，margin失效，就导致方案不可用。容错性更好些。——这个理解，跟老师的总结差不多。看样子是明白了。

反思补充：开启定位就相当于脱离文档流，这点我倒是没有融会贯通想到，脱离文档流的意思是啥？就是指高度塌陷吗？那是不是先用第二种方案实现一下水平居中，然后设置float布局，或者设置开启定位(绝对定位absolute，fixed固定定位)，效果应该是一样的 ，都会令子集元素的水平居中效果失效。待制作demo验证。

老师的回答：父级元素是否脱离文档流，不影响子集元素的水平居中效果。

- 缺点：

没想过。如果现在想的话，我觉得没啥缺点。就是写平移的时候，用成百分比更好，这样即使后续子集元素width宽度改动后，平移不用跟着改。

老师的回答：transform属性是CSS3中新增的属性，浏览器支持情况不好。

反思补充：浏览器支撑情况，我觉得如果不考虑IE8的话，一般浏览器都支持。再者还是可以找找看，有没相关的polyfill，也不算太大问题。这其实涉及到一个决策识别。如果要支持老版本浏览器的话，就不能采用第三种解决方案了，而是要采用第一种或者第二种解决方案了。

- 遗留的思考题：

能否举一反三的，通过这3种，想到第4种，第n种呢。——这个等我把3个搞清楚了，再来好好整理想想。

> 水平居中布局的第三种解决方案：

- 方法拆分：

html：两层结构【父子级】

css：子集-absolute,left和transform；父级-开启定位 [除static外都是开启定位]

- 详细说明

1.开启absolute后，需要判断直接父级元素是否开启定位，如果开启，当前元素就是 相对于父级元素定位，也就是说，天花板是他的父级元素；如果直接父级元素没有开启定位，那当前元素就是 相对于页面定位的【其实这点我觉得仅适用于当前例子，如果body和直接父级节点还有包含节点的话，比如父级的父级节点，如果开启定位的话，那就不是相对页面定位了，而是父级的父级节点了。这点待补充例子证明】

2.translateX 表示平移， X表示水平方向的平移，左移动就是负值，右移动就是正值。想左边移动子集元素的一半，那就是子集元素width的一半即可。

3.子集元素的平移写法，可以写具体值，也可以写百分比。当宽度变的时候，平移如果写具体值的话，也需要跟着变，这时候用百分比-50%【如果平移一半的话】，那无论子集元素的width如何变，平移的设置都不用跟着改了，相对来说，代码更优。

> 水平居中布局的第二种解决方案

1.优点

没想过。

老师的回答：只需要对子集元素设置样式即可。更简单。相比第一种父级，子集，都需要设置来说，要简单很多。

2.缺点

没想过。

老师的回答：如果子集元素脱离文档流，导致margin属性的值无效。

补充：导致脱离文档流的3种场景。

1)浮动float

2)绝对absolute定位

3)固定fixed定位

3.总结

第一种和第二种都有优缺点，所以没有绝对的好，绝对的不好。还是要择机而动，根据场景不同，来选择合适的方案。

>水平居中布局的第二种解决方案：

- 和第一种的差异：只需要在子集元素中设置样式，而非父级，子集元素都设置。

- margin属性外边距的4个值。

技术实现分析：

1.margin: auto 表示根据浏览器自动分配

2.display: table/block，但是不能为inline。

但是对于第2点，我个人觉得inline-block应该也是可以的。因为inline-block也具有block的特性。但实际测试了下，是不行的。可能因为也属于inline，所以不行。可以得出结论是margin:auto这种方式，必须配合块级元素，不能是内联块级，或者是内联元素。

水平居中布局的第一种解决方案优缺点：

1.优点：

没想过这个问题。都是想的能实现就完了，而且实现的也不明不白的。

老师的回答：IE6-9，css2(text-align和display:inline-block)，浏览器兼容性比较好

2.缺点：

没想过。

老师的回答：text-align有继承性。子集元素也会应用父级对齐方式。子集元素如果不想继承，需要重置覆盖父级元素的样式【多加一行代码，比如子集元素左对齐，text-align:left】

3.为啥要知道优缺点？

没想过。

老师的回答：搞清楚优缺点，是为了识别场景后，用上合理的解决方案，没有最好和最坏，而非生搬硬套过去，然后用的不明不白，糊里糊涂。

> 水平居中布局的第一个解决方案

技术点：text-align:center(父级元素) + display:inline-block(子集元素)

技术说明：

text-align针对的是文本内容

inline内联元素，也属于文本内容。

之所以设置为inline-block，是因为inline下的width和height是无效的。

简要概括：

组合拳，父容器设置text-align，子容器设置文本且支持宽高尺寸设置display:inline-block。

相当于是 text-align和inline的组合拳。inline-block相当于是一次polyfill补丁。

> 水平居中布局的概念：

当前元素相对于谁水平居中。可以是页面，也可以是父级元素。核心是左右方向放中间。

>水平居中布局：

-我知道的：

1.块级元素：margin:0 auto;

2.行内元素：text-align:center

-课程中讲的(常用的有3种，但不止这些)：

inline-block+text-align配合（其实跟"我知道的2"差不多，只不过是用css定义元素类型为内联元素了。）

table+margin属性配合使用(其实跟"我知道的1"差不多，只不过是用css定义元素类型为块级元素了。)

absolute+transform配合使用(这个其实也知道，但是就是用的不太熟，百分比还是/2的数值应用在哪个样式，老是整不明白)

居中布局分类，3种：水平，垂直，水平+垂直

> 布局为何头疼：难

原因1：逻辑性及设计感强

原因2：不能debugger代码定位(语言开发，比如JS，可以跟代码)

原因3：没有套路规律可行

> 布局不是技术内容(html和css)，而是一种设计思想(活学活用，而非只是语法堆砌)

需要不断练习，才能融会贯通

float + margin

两列布局的方式

absolute + transform 实现垂直居中

display:table-cell vertical-align 垂直居中

垂直居中布局实现方式

absolute + transform实现水平居中