CSS布局

前言

以下将针对CSS常见的居中及布局问题进行讲解，主要以float及对position的两种方法进行讲解。

左右、左中右布局

1. float
   利用float: left, float:right设置左右布局，然后通过clearfix清除浮动。

/* HTML代码 */
  <div class="float_parent">
    <div class="clearfix">
      <div class="left">
        
      </div>

      <div class="middle">

      </div>

      <div class="right">
        
      </div>
    </div>
  </div>

/* CSS 代码 */
.left {
  border: 1px solid lightcoral;
  background: lightcoral;
  float: left;
  height: 100px;
  width: 100px;
}


.right {
  border: 1px solid palegreen;
  background: palegreen;
  float: left;
  height: 100px;
  width: 100px;
  
}

.middle{
  border: 1px solid orange;
  background: orange;
  float: left;
  height: 100px;
  width: 100px;
}

2. position
   设置父元素位置为position: relative, 需要左中右布局的元素设置position:absolute，以及top/left或right属性。
   代码如下：

/* HTML 代码 */
  <div class="position_parent">
    <div class="pos_left">

    </div>

    <div class="pos_middle">

    </div>

    <div class="pos_right">

    </div>

  </div>

/* CSS 代码 */
.position_parent {
  position: relative;
}

.pos_left {
  border: 1px solid lightcoral;
  background: lightcoral;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 200px;
  left: 0px;
}

.pos_right {
  border: 1px solid rgb(103, 240, 126);
  background: rgb(103, 240, 126);
  height: 100px;
  width: 100px;
  position: absolute;
  top: 200px;
  left: 204px;
}

.pos_middle {
  border: 1px solid orange;
  background: orange;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 200px;
  left: 102px;
}

水平、垂直居中

1. 对于行内元素的水平居中，只设置inline元素display: inline-block，然后设置其父级元素(父级元素需要为text-align: center，即可实现元素的水平居中。

要设置垂直居中，一般可设置vertical-align: top

2. 对于块级元素的水平居中，只需将其margin-left, margin-right设置为auto; 多个块级元素可以将其设置为inline-block，然后套用方法1

3. 垂直居中
   --绝对定位时可以设置top, left各为50%，结合margin负实现元素的垂直居中或者top, bottom, left, right为0，margin auto。

--父元素高度确定的单行文本，可以设置height=line-height实现

--对于inline-block元素，有时可设置vertical-align: middle使元素居中

*小技巧：

1. 利用CSS3的属性，如transform实现居中

.container{
    position:relative;
}
 
.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

2. 利用table-cell

display:table-cell;
vertical-align:middle;
text-align:center;

3. Flex布局（针对新浏览器等)

.center{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}

4. :before 

其他可参考[知乎](https://www.zhihu.com/question/20543196)