简单介绍几种CSS布局方式
左右布局
实现的方式：
1.float + margin：
左右布局1
2.position的absolute ：
左右布局2
三栏布局
实现的方式：
三栏布局
水平居中
行内或类行内元素（比如文本和链接）
在块级父容器中让行内元素居中，只需使用text-align: center;：
这种方法可以让inline/inline-block/inline-table/inline/flex等类型的元素实现居中。块级元素
让块级元素居中的方法就是设置margin-left和margin-right为auto（前提是已经为元素设置了适当的width宽度，否则块级元素的宽度会被拉伸为父级容器的宽度）。-
多个块级元素
如果要让多个块级元素在同一水平线上居中，那么可以修改它们的display值。
多个块级元素居中
垂直居中
- 行内或类行内元素（比如文本和链接）
单行
对于单行行内或者文本元素，只需为它们添加等值的 padding-top 和 padding-bottom 就可以实现垂直居中：
.link { padding-top: 30px; padding-bottom: 30px; }
如果因为某些原因我们不能使用 padding 属性来实现垂直居中，而且已知文本不会换行，那么就可以让 line-height 和 center 相等，从而实现垂直居中：
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
多行
多行文字垂直居中
你还可以使用 flexbox 实现垂直居中，对于父级容器为 display: flex 的元素来说，它的每一个子元素都是垂直居中的：
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
