簡單介紹幾種CSS布局方式

左右布局

實(shí)現(xiàn)的方式：

1.float + margin：

左右布局1

2.position的absolute ：

左右布局2

三欄布局

實(shí)現(xiàn)的方式：

三欄布局

水平居中

• 行內(nèi)或類行內(nèi)元素（比如文本和鏈接）
  在塊級父容器中讓行內(nèi)元素居中，只需使用 text-align: center; ：
  這種方法可以讓 inline/inline-block/inline-table/inline/flex 等類型的元素實(shí)現(xiàn)居中。

• 塊級元素
  讓塊級元素居中的方法就是設(shè)置 margin-left 和 margin-right 為 auto（前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)?width 寬度，否則塊級元素的寬度會被拉伸為父級容器的寬度）。

• 多個(gè)塊級元素
  如果要讓多個(gè)塊級元素在同一水平線上居中，那么可以修改它們的 display 值。
  

  多個(gè)塊級元素居中

垂直居中

• 行內(nèi)或類行內(nèi)元素（比如文本和鏈接）

單行

對于單行行內(nèi)或者文本元素，只需為它們添加等值的 padding-top 和 padding-bottom 就可以實(shí)現(xiàn)垂直居中：

.link { padding-top: 30px; padding-bottom: 30px; }

如果因?yàn)槟承┰蛭覀儾荒苁褂?padding 屬性來實(shí)現(xiàn)垂直居中，而且已知文本不會換行，那么就可以讓 line-height 和 center 相等，從而實(shí)現(xiàn)垂直居中：

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

多行

多行文字垂直居中

你還可以使用 flexbox 實(shí)現(xiàn)垂直居中，對于父級容器為 display: flex 的元素來說，它的每一個(gè)子元素都是垂直居中的：

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}