垂直水平居中的N中方法

1.必须要设置居中元素的宽高;
2.宽高变化后margin也要做相应改变.
3.适应所有浏览器.

        .container {
          position: relative;
          width: 400px;
          height: 200px;
        }

        .container .child {
          position: absolute;
          width: 280px;
          height: 140px;
          top: 50%;
          left: 50%;
          margin-left: -140px;
          margin-top: -70px;
        }

1.必须要设置居中元素的宽高或为图片;
2.宽高变化后, margin值不需要跟着改变.
3.不支持IE6、IE7.

        .container {
          position: relative;
          width: 400px;
          height: 200px;
        }

        .container .child {
          position: absolute;
          width: 280px;
          height: 140px;
          margin: auto;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
        }

1.方法 1 的演变;
2.只是将margin属性变成了translate(-50%,-50%);
3.宽高变化后, margin值也不需要跟着改变;
4.IE9以下不支持，适合移动端。

        .container {
          position: relative;
          width: 400px;
          height: 200px;
        }

        .container .child {
          position: absolute;
          width: 280px;
          height: 140px;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
        }

1.要多加两层标签:inner-table和inner-cell;
2.要居中的元素必须为inline或inline-block; 如果为block元素，则需设置margin:0 auto;
3.inner-cell元素和要居中的元素都不能设置float;
4.不支持IE6、IE7.

        .container {
          width: 400px;
          height: 200px;
        }

        .container .inner-table {
          display: table;
          width: 100%;
          height: 100%;
        }

        .container .inner-table .inner-cell {
          width: 280px;
          height: 140px;
          display: table-cell;
          vertical-align: middle;
          text-align: center;
        }

        .container .inner-table .inner-cell .child {
          width: 280px; height: 140px;
          display: inline-block;
        }

只能针对inline元素或inline-block元素

        .container {
          width: 400px;
          height: 200px;
          line-height: 200px;
          text-align: center;
        }

        .container .child {
          display: inline/inline-block;
          vertical-align: middle; /*针对img或*inline-block元素设置/
        }

1.任何元素都可以。
2.只要设置父级元素的属性就可以。
3.只兼容支持display:box的浏览器。
4.此demo只兼容了webkit浏览器;适合移动端。

        .container {
          width: 400px;
          height: 200px;
          display: -webkit-box;
          -webkit-box-pack: center;
          -webkit-box-align: center;
        }

        .container .child {
          /* Anyway, I don't care. */
        }

1.用vertical属性来设置所有内以中线对齐。
2.用:before添加一个content对设置100%高度。

        .container {
          width: 400px;
          height: 200px;
          text-align: center;
        }

        .container:before {
          content: '';
          display: inline-block;
          height: 100%;
          vertical-align: middle;
        }

        .container .child {
          display: inline-block;
          vertical-align: middle;
        }

多个元素的水平垂直居中

      <div class="container">
        <div class="inner-table">
            <div class="inner-cell">
              <div class="child-1"></div>
            </div>
            <div class="inner-cell">
              <div class="child-2"></div>
            </div>
          </div>
        </div>
      </div>

        .inner-table{
          height: 100%; /*垂直居中*/
          display: table;
          margin: 0 auto; /*水平居中*/
          font-size: 0;
        }

        .inner-table .inner-cell{
          display: table-cell;
          vertical-align: middle;
          padding-right: 10px;
        }

        <div class="container">
          <div class="child-1"></div>
          <div class="child-2"></div>
        </div>

        .container {
          width: 400px;
          height: 200px;
          text-align: center;
          /*解决inline-block
          元素间的空白*/
          font-size: 0;
        }

        .container:before {
          content: '';
          display: inline-block;
          height: 100%;
          vertical-align: middle;
        }
        .container .child {
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px;
        }

一些需要注意的事项：
1.{margin:0 auto} 实现水平居中分以下三种情况：
  (1)【block元素】必须设置宽度;
  (2)【img】必须设置display:block,可以不设置宽度;
  (3)【table】可以不设置宽度;
      1)因此，不知到宽度的元素可以通过设置{display:table}来实现

2.多个inline-block元素间会出现多余的空白：
  (1)原因：空白是inline-block元素间的回车字符造成的
  (2)解决：设置父级元素的font-size:0

单个元素的水平垂直居中

多个元素的水平垂直居中