CSS布局小结

1.左右布局

使用float实现

对左部分区域设置float:left，右部分区域设置float:right。

使用flex布局

对父元素设置display: flex，然后通过设置justify-content属性，来确定子元素在水平方向上的展现形式。

2.左中右布局

和左右布局一样，可采用上述两种方式来实现

3.水平居中

• 行内元素，在其父级元素上设置
  text-align: center;

• 确定宽度的块级元素
  margin: 0 auto;

• 对于未知宽度的块级元素
  1.对目标元素设置display：inline-block，再对其父级元素设置text-align:center。
  2.flex实现

  .parent{
    display: flex;
    flex-direction: column;
  }
  .targetEle{
    align-self:center;
  }
  

4.垂直居中

• table-cell实现

  .parent{
      display: table-cell;
      vertical-align: middle;
      text-align: center;        
  }
  

• flex实现
  1.给父元素设置display:flex；align-items:center；
  2.给父元素设置display:flex；flex-direction:column；justify-content:center；
  3.给父元素设置display:flex；子元素设置margin:auto 0；

5.实用小技巧之水平垂直居中（干货满满）

• 给父元素设置display:flex；justify-content:center；align-items:center；
• 给父元素设置display:flex；给子元素设置margin:auto；