两列布局，三列布局，垂直水平居中

两列布局：

左侧200px

右侧自适应

三种方法：

1.flex

2.浮动：

  左侧浮动，右侧：margin-left:左侧宽度

3.定位

  左侧定位，右侧：margin-left:左侧宽度

 

三列布局

左右侧200px,中间自适应

1.flex

2.浮动

  左侧：float:left

  右侧：float:right

  中间：margin值

3.定位

  左侧：定位left

  右侧：定位right

  中间：margin值

 

垂直水平居中：

1.已知子元素的宽度高度

  父元素:position:relative

  子元素:position:absolute

        top:50%

        left:50%

        margin减去元素自身宽高度

2.不知子元素的宽度高度

  父元素:position:relative

  子元素:position:absolute

        top:50%

        left:50%

        transform: translate(-50%,-50%)

3.flex布局

  display:flex

  justify-content:center;//使子元素水平居中

  align-items:center;//使子元素垂直居中

4.table-cell布局

  父元素：

  display:table;

  子元素：

  display: table-cell;

  vertical-align: middle;//使子元素垂直居中

  text-align: center;//使子元素水平居中