左右/左中右布局
1. 浮动
给所有子元素添加float:left;,同时给父元素添加clearfix类,解决浮动出现的bug。
CSS:
HTML:
2. 行内块
使用display: inline-block;使块元素成为行内块，此时会出现bug：下方出现一个空隙，一定要用vertical-align: top;来解决。
3. 绝对定位
为父元素设置position:relative;，为子元素设置position:absolute; 。如图：
特定情况下使用浮动还是绝对定位:
1.使用浮动时：不需要计算特别精确的位置，不过不易操控，浮动元素的宽度需要注意，否则会换行展示，适用于导航栏等地方。
2.使用绝对定位：需要计算元素的具体位置，不过更加准确，易于操控。
3.当某些元素的位置要根据父元素的大小自适应，内容宽度无法确定时，建议使用浮动。
4.当特定元素的位置是相对父元素固定，或者内容宽高确定，需要精确定位甚至以后要用js操作变换位置时，建议使用浮动。
4. Flex布局
给父级加上 display: flex;定义其为flex容器，使用flex-direction: row;使主轴水平；
HTML:
CSS:
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。
- 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效;
- flex-direction属性决定主轴的方向（即项目的排列方向）,它可能有4个值;
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
- 更多flex语法:阮一峰博客--http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
水平居中
1.内联元素水平居中：
将内联元素外部的块级元素的text-align设置为center,即可实现内联元素(inline、inline-block)的水平居中。可设置内联元素的行高line-height控制内联元素所占高度。
2. 块级元素水平居中：
将固定宽度的块级元素的margin-left和margin-right设置成auto，即可实现元素的水平居中。
3. 多个块级元素水平居中：
如图中ol的布局问题，
display: inline-block;使其成为行内块，默认收缩。此时会出现bug：下方出现一个空隙，一定要用vertical-align: top;来解决，结果如图：此时这是一个内联元素，在父级中加入
text-align: center;可以实现子元素水平居中。CSS:
4.绝对定位
通过position:absolute;实现CSS水平居中。
5.flex布局
justify-content属性定义了项目在主轴上的对齐方式；
使用justify-content:center;实现居中；
CSS:
justify-content可能取5个值，具体对齐方式与轴的方向有关,下面假设主轴为从左到右。- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
垂直居中
1.内联元素垂直居中
设置内联元素的行高(line-height)和内联元素的父元素的高度(height)相等，且内联元素的字体大小远小于行高，即可使内联元素垂直居中。
2.块级元素垂直居中
- 固定高度的块级元素：
通过绝对定位使元素距离顶部50%，并设置margin-top向上移元素高度的一半，实现垂直居中。 - 通过verticle-align:middle实现CSS垂直居中。(vertical生效的前提是元素的
display：inline-block。)
3.flex布局
使用align-items:center;使子元素相对交叉轴的中点对齐（默认交叉轴从上到下）。
CSS:
- align-items属性定义项目在交叉轴上如何对齐。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
