CSS布局

简单介绍几种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;
}