css-居中对齐div内文字实现水平居中对齐，如果是单行文字，适合用line-height和text-align来设置居

居中对齐的范围主要包括：

div内文字居中对齐
单个div在父组件内居中对齐
多个div在父组件内居中对齐

初始样例：代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>居中</title>
  </head>
  <body>
    <div class="container" >
      <div class="yellow-box">kim</div>
      <div class="blue-box"></div>
      <div class="red-box"></div>
    </div>
    <canvas id="mycanvas" width="400" height="400"></canvas>
  </body>
  <script type="text/javascript">
    var canvas = document.getElementById('mycanvas')
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(400,400);
    ctx.moveTo(400,0);
    ctx.lineTo(0,400);
    ctx.moveTo(200,0);
    ctx.lineTo(200,400)
    ctx.stroke();
  </script>
  <style media="screen">
    #mycanvas {
      position: absolute;
      top: 8px;
    }
    .container {
      background: gray;
      height: 400px;
      width: 400px;
      position: relative;
    }
    .blue-box {
      background: blue;
      height: 50px;
      width: 50px;
    }
    .yellow-box {
      background: yellow;
      height: 60px;
      width: 50px;
    }
    .red-box {
      background: red;
      height: 80px;
      width: 60px;
    }
  </style>
</html>

单行元素的水平居中

div内文字实现水平居中对齐，如果是单行文字，适合用line-height和text-align来设置居中。

.yellow-box {
  background: yellow;
  height: 60px;
  width: 50px;
  text-align: center;
  line-height: 60px;
}

如果超出一行，那就无法实现全部居中对齐了，因为设置了行高和容器的高度一致，第二行会被顶出容器外。这种情况可以配合text-overflow和overflow实现超出的部分用...代替，仍保持单行的居中效果。

.yellow-box {
  background: yellow;
  height: 60px;
  width: 50px;
  text-align: center;
  line-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 	// 不断行
}

div元素在父组件内的水平居中

div元素在父组件内的水平居中是最容易实现的，

可以用margin: 0 auto配合一个固定宽度，
或者text-align: center
也可以通过position属性配合设置偏移量实现。
flex布局
不介意也可以用float
position:table-cell+ vertical-align: middle

下面具体介绍水平、垂直居中的实现几种方式。

text-align + vertical-align + 伪类实现多div居中对齐

vertical-align实现的是inline，inline-block,table-cel box元素的居中对齐，所以如果用vertical-align的话可以把div设置为display: inline-block，配合父组件text-align: center实现。

.container {
  background: gray;
  height: 400px;
  width: 400px;
  text-align: center;
}
.blue-box {
  background: blue;
  height: 50px;
  width: 50px;
  vertical-align: middle;
  display: inline-block;

}
.yellow-box {
  background: yellow;
  height: 60px;
  width: 50px;
  vertical-align: middle;
  display: inline-block;

}
.red-box {
  background: red;
  height: 80px;
  width: 60px;
  vertical-align: middle;
  display: inline-block;
}

上面实现了三个div元素的中线对齐和水平居中，还没有实现在父组件内的垂直居中。这里用一个取巧的方法，用伪类添加一个高为100%的元素，在这种情况下中线对齐了就是垂直居中对齐了。

    .container::before {
      content: '';
      width: 1px;   // 方便观察设为1px，否则设置为0，不可见
      height: 100%;
      background: white;//方便观察
      vertical-align: middle;
      display: inline-block;
    }

display table-cell

在表单的<td>元素里要实现文字垂直居中是相当容易的，只需要vertical-align:middle就可以,因为<td>元素默认的是table-cell布局。所以也可以通过设置display: table-cell来实现居中对齐

table-cell实现文字居中

    .yellow-box {
      background: yellow;
      height: 60px;
      width: 50px;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

table-cell实现div居中

    .container {
      background: gray;
      height: 400px;
      width: 400px;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    /* .container::before {
      content: '';
      width: 1px;
      height: 100%;
      background: white;
      vertical-align: middle;
      display: inline-block;
    } */
    .blue-box {
      background: blue;
      height: 50px;
      width: 50px;
      display: inline-block;
      vertical-align: middle;
    }
    .yellow-box {
      background: yellow;
      height: 60px;
      width: 50px;
      display: inline-block;
      vertical-align: middle;
    }
    .red-box {
      background: red;
      height: 80px;
      width: 60px;
      display: inline-block;
      vertical-align: middle;
    }

position relative实现居中

设置了position: relative后，元素不会脱离文档流，偏移量参数top, right, bottom, left是参照元素原本的位置进行偏移的。这种模式适合单个div元素在父组件内的居中对齐，如果是多个div元素，因为初始位置不同，参照就不同，所以不适合用在多个div居中的情况。

例如原始图片下yellowbox比较容易设置居中对齐，顶部和左侧偏移50%，再补回自身的宽高度即可。如果是bluebox，如果要偏移，参照的是原先的位置，原先的位置在yellowbox之下，就还要考虑yellowbox的高度问题。

具体实现方法还有两种，一种是用calc计算属性直接计算出偏移量，另一种是先偏移一半再用tranform属性偏移自身50%的宽高

    .yellow-box {
      background: yellow;
      height: 60px;
      width: 50px;
      position: relative;
      top: calc(50% - 30px);
      left: calc(50% - 25px);
    }

或者

    .yellow-box {
      background: yellow;
      height: 60px;
      width: 50px;
      position: relative;
      /* top: calc(50% - 30px);
      left: calc(50% - 25px); */
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

从图上可以看到yellowbox被居中了，但是原来的位置还是占着的，bluebox的位置靠着yellowbox下放。

position absolute实现居中对齐

设置position: absolute也可以实现单个div元素在父组件内居中对齐，只不过这时候div元素是脱离文档流的，如果有多个div有可能会重叠，而且父组件内最好设置position: relative。

如果是absolute情况下，偏移量是以父组件为参照

It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

    .container {
      background: gray;
      height: 400px;
      width: 400px;
	  position: relative;
    }
    .yellow-box {
      background: yellow;
      height: 60px;
      width: 50px;
      position: absolute;
      top: calc(50% - 30px);
      left: calc(50% - 25px)
    }

yellowbox被居中了，因为yellowbox脱离文档流，所以并不会占原先的位置，这时候如果同样的方法设置bluebox居中，那么就会重叠。

flex实现居中

现在最常用的还是flex布局实现居中，使用起来很方便。 justify-content属性定义了项目在主轴上的对齐方式，默认主轴方向是水平向右。 align-items属性定义项目在交叉轴上如何对齐，默认交叉轴是竖直向下。

    .container {
      background: gray;
      height: 400px;
      width: 400px;
      display: flex;
      justify-content: center;  
      align-items: center;     
    }
    .blue-box {
      background: blue;
      height: 50px;
      width: 50px;
    }
    .yellow-box {
      background: yellow;
      height: 60px;
      width: 50px;
    }
    .red-box {
      background: red;
      height: 80px;
      width: 60px;
    }

css-居中对齐