本文主要介绍了css常用的布局，居中等其他小技巧。

css布局

左右布局

利用float实现左右布局

左右模块设置float:left;,并且设置宽度，保证左右模块加起来的和等于100%，父级利用clear清除浮动。

html代码

  <div class="wrap clearfix">
    <div class="left-box">
      这是左边
    </div>
    <div class="right-box">
      这是右边
    </div>
  </div>

css代码

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.wrap {
  padding: 10px;
  background: #ccc;
}
.left-box {
  float: left;
  background: #eaa;
  font-size: 30px;
  width: 40%;
  text-align: center;
  height: 300px;
}
.right-box {
  float: right;
  background: #6a8;
  font-size: 30px;  
  width: 60%;
  text-align: center;
  height: 300px;
}

利用flex实现左右布局

利用css3的弹性布局盒子，实现左右布局。直接在父元素上设置display:flex;即可。
html代码

  <div class="wrap">
    <div class="left-box">
      这是左边
    </div>
    <div class="right-box">
      这是右边
    </div>
  </div>

css代码

.wrap {
  display: flex;
  padding: 10px;
  background: #ccc;
}
.left-box {
  background: #eaa;
  font-size: 30px;
  width: 40%;
  text-align: center;
  height: 300px;
}
.right-box {
  background: #6a8;
  font-size: 30px;  
  width: 60%;
  text-align: center;
  height: 300px;
}

若其中有一个模块为宽度为定宽，那么只需要在另一个模块上设置flex: 1;即可。

左中右布局

实现左中右布局，可以使用float,inline-blok,flex等多种方式来实现。

利用float实现

利用float实现左中右布局，原理跟上文的左右布局类似，只需要添加一个中间模块即可。
html 代码

  <div class="wrap clearfix">
    <div class="left-box">
      这是左边
    </div>
    <div class="middle-box">
      这是中间
    </div>
    <div class="right-box">
      这是右边
    </div>
  </div>

css代码

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.wrap {
  display: block;
  padding: 10px;
  background: #ccc;
}
.left-box {
  float: left;
  width: 30%;
  background: #eaa;
  font-size: 30px;
  text-align: center;
  height: 300px;
}
.middle-box {
  float: left;
  width: 40%;
  background: #a8a;
  font-size: 30px;
  text-align: center;
  height: 300px;
}
.right-box {
  float: left;
  width: 30%;
  background: #6a8;
  font-size: 30px;  
  text-align: center;
  height: 300px;
}

利用inline-block实现左中右居中

理由inline-block实现左中右布局，有一个细节要注意一下，需要在父节点上面设置font-size: 0;除去标签之间回车引起的空格。还有就是圣杯布局，兼容性好一点。
html带代码

  <div class="wrap">
    <div class="left-box">
      这是左边
    </div>
    <div class="middle-box">
      这是中间
    </div>
    <div class="right-box">
      这是右边
    </div>
  </div>

css代码

.wrap {
  display: block;
  padding: 10px;
  background: #ccc;
  font-size: 0;
}
.left-box {
  display: inline-block;
  width: 30%;
  background: #eaa;
  font-size: 30px;
  text-align: center;
  height: 300px;
}
.middle-box {
  display: inline-block;
  width: 40%;
  background: #a8a;
  font-size: 30px;
  text-align: center;
  height: 300px;
}
.right-box {
  display: inline-block;
  width: 30%;
  background: #6a8;
  font-size: 30px;  
  text-align: center;
  height: 300px;
}

flex实现左中右布局

原理如上文提到的左右布局相似，只需要多添加一个模块即可。

圣杯布局

圣杯布局是为了兼容老版本的ie浏览器使用的手段。功能是左右固定宽度，中间可变。相对来说，圣杯布局的复杂度高一点，但只要理解了，也就很容易搞清楚。
htm代码

  <div class="wrap clearfix">
    <div class="middle box">
      <div class="margin-inner">
              这是中间
      </div>
    </div>
    <div class="left box">
      这是左边
    </div>
    <div class="right box">
      这是右边
    </div>
  </div>

css代码

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.box {
  float: left;
  min-height: 300px;
  font-size: 30px;
  text-align :center;
}
.wrap {
  padding: 10px;
  display: block;
  background: #ccc;
  font-size: 0;
}
.left {
  margin-left: -100%;
  width: 200px;
  background: #eaa;
}
.middle {
  width: 100%;
}
.middle .margin-inner {
  margin: 0 220px 0 200px;
  background: #a8a;
  min-height: 200px;
}
.right {
  margin-left: -220px;
  width: 220px;
  background: #6a8;
}

居中

水平居中

margin实现块级元素水平居中

给设置好宽度的块级元素设置的margin: 0 auto;实现水平居中

inline-block实现水平居中

给元素设置display: inline-block;,设置父级元素的属性width: 100%;text-align: center;

flex实现水平居中

父级元素设置display: flex;justify-content: center;即可
html代码

  <div class="wrap">
    <div class="box">
      第一行文字<br>
      第一行文字<br>
      第一行文字<br>
      第一行文字
    </div>

css代码

.wrap {
  display: flex;
  justify-content: center;
  height: 600px;
  font-size: 30px;
  background: #ccc;
  font-size: 0;
}
.box {
  display: inline-block;
  padding: 10px;
  vertical-align: middle;
  font-size: 30px;
}

垂直居中

利用padding或line

• 可以设置上下padding
• line-height和height相等实现。

利用display: table

父级元素设置display: table;,子元素设置display: table-cell;vertical-align: middle;
html代码

  <div class="wrap">
    <div class="box">
      第一行文字<br>
      第一行文字<br>
      第一行文字<br>
      第一行文字
    </div>
  </div>

css代码

.wrap {
  display: table;
  height: 600px;
  font-size: 30px;
  text-align:center;
}
.box {
  padding: 10px;
  display: table-cell;
  vertical-align: middle;
  background: #ccc;
  font-size: 30px;
}

利用伪元素实现

设置伪元素高度100%,宽度为0，然后利用垂直对齐属性vertical-align: middle;实现垂直居中。
html代码

  <div class="wrap">
    <div class="box">
      第一行文字<br>
      第一行文字<br>
      第一行文字<br>
      第一行文字
    </div>
  </div>

css代码

.wrap {
  display: block;
  height: 600px;
  font-size: 30px;
  background: #ccc;
  font-size: 0;
}
.wrap::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}
.box {
  padding: 10px;
  display: inline-block;
  vertical-align: middle;
  font-size: 30px;
}

注意细节，需要把父级元素font-size设置为0。如果想要兼容ie8及以下，需要把::before改为:before。

利用定位给已知高度的元素设置垂直居中

父级元素设置position: relative;，子元素设置positon:absolute;,在利用margin实现垂直居中
html代码

  <div class="wrap">
    <div class="box"></div>
  </div>

css代码

.wrap {
  position: relative;
  height: 600px;
  font-size: 30px;
  background: #ccc;
  font-size: 0;
}
.box {
  position: absolute;
  top: 50%;
  margin-top: -90px;
  width: 150px;
  height: 180px;
  font-size: 30px;
  background: #987;
}

利用flex实现垂直居中

父级元素设置flex和align-items: center;即可
html代码

<div class="wrap">
    <div class="box"></div>
  </div>

css代码

.wrap {
  display: flex;
  align-items: center;
  height: 600px;
  font-size: 30px;
  background: #ccc;
  font-size: 0;
}
.box {
  top: 50%;
  width: 150px;
  height: 180px;
  font-size: 30px;
  background: #987;
}

其他小技巧

使用margin实现水平和垂直同时居中。

给元素设置绝对定位，左右上下距离设置为0，再利用margin： auto;使得上下左右距离均匀分配。

html代码

 <div class="box"></div>

css代码

.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 150px;
  height: 180px;
  font-size: 30px;
  background: #987;
}

文字间距

写页面时，经常遇到需要扩大文字间间距的情况，尤其是标题，如果用空格去填充那就太麻烦了，代码也不够优雅。好在css提供了扩大文字间距的属性letter-spacing。

文字并没有居中

text-indent配合letter-spacing

代码如下：

  letter-spacing: 0.5em;
  text-indent: 0.5em;