居中布局

水平居中

[ 页面效果 ] 子元素与父元素水平居中且其（子元素与父元素）宽度均可变

[1] inline-block + text-align

[ 原理 ] 先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。

[ 用法 ] 对子框设置display:inline-block，对父框设置text-align:center。

<div class="parent">
   <div class="child">Demo</div>
</div>

<style>
   .child {
      display: inline-block;
   }
   .parent {
      text-align: center;
   }
</style>

// 优点：兼容性好，甚至可以兼容ie6、ie7
// 缺点：child里的文字也会水平居中，可以在.child添加text-align:left;还原

</div>

<style>

.child {

display: inline-block;

}

.parent {

text-align: center;

}

</style>

// 优点：兼容性好，甚至可以兼容ie6、ie7

// 缺点：child里的文字也会水平居中，可以在.child添加text-align:left;还原

[2] table + margin

[ 原理 ] 先将子框设置为块级表格来显示（类似），再设置子框居中以达到水平居中。

[ 用法 ] 对子框设置display:table，再设置margin:0 auto。

<div class="parent">
   <div class="child">Demo</div>
</div>

<style>
   .child {
      display: table;
      margin: 0 auto;
   }
</style>

// 优点：只设置了child，无需设置父元素样式；ie8以上都支持
// 缺点：不支持ie6、ie7,兼容IE8以下版本需将div换成table。(display:table在表现上类似block元素，但是宽度为内容宽）

</div>

<style>

.child {

display: table;

margin: 0 auto;

}

</style>

// 优点：只设置了child，无需设置父元素样式；ie8以上都支持

// 缺点：不支持ie6、ie7,兼容IE8以下版本需将div换成table。(display:table在表现上类似block元素，但是宽度为内容宽）

[3] absolute + transform

[ 原理 ] 将子框设为绝对定位，移动子框，使子框左侧距离相对框左侧边框的距离为相对框宽度的一半，再通过向左移动子框的一半宽度以达到水平居中。当然，在此之前，需要设置父框为相对定位，使父框成为子框的相对框。

[ 用法 ] 对父框设置position:relative，对子框设置position:absolute，left:50%，transform:translateX(-50%)。

<div class="parent">
   <div class="child">Demo</div>
</div>

<style>
   .parent {
      position: relative;
   }
   .child {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
   }
</style>

// 优点：绝对定位脱离文档流，不会对后续元素的布局造成影响。即，居中元素不会对其他的产生影响
// 缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

</div>

<style>

.parent {

position: relative;

}

.child {

position: absolute;

left: 50%;

transform: translateX(-50%);

}

</style>

// 优点：绝对定位脱离文档流，不会对后续元素的布局造成影响。即，居中元素不会对其他的产生影响

// 缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

[4] flex + margin

[ 原理 ] 通过CSS3中的布局利器flex将子框转换为flex item，再设置子框居中以达到居中。

[ 用法 ] 先将父框设置为display:flex，再设置子框margin:0 auto。

<div class = "parent">
   <div class = "child> DEMO </div>
</div>
<style>
   .parent {
      display : flex;
   }
   .child {
      margin : 0 auto;
   }
</style>

// 缺点：低版本浏览器(ie6 ie7 ie8)不支持

</div>

<style>

.parent {

display : flex;

}

.child {

margin : 0 auto;

}

</style>

// 缺点：低版本浏览器(ie6 ie7 ie8)不支持

[5] flex + justify-content

[ 原理 ] 通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。

[ 用法 ] 先将父框设置为display:flex，再设置justify-content:center。

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
   .parent {
      display: flex;
      justify-content: center;
   }
</style>

// 优点：只需设置父节点属性，无需设置子元素
// 缺点：低版本浏览器(ie6 ie7 ie8)不支持

</div>

<style>

.parent {

display: flex;

justify-content: center;

}

</style>

// 优点：只需设置父节点属性，无需设置子元素

// 缺点：低版本浏览器(ie6 ie7 ie8)不支持

垂直居中

[ 页面效果 ]子元素于父元素垂直居中且其（子元素与父元素）高度均可变

[1] table-cell + vertical-align

[ 原理 ] 通过将父框转化为一个表格单元格显示，再通过设置属性，使表格单元格内容垂直居中以达到垂直居中。

[ 用法 ] 先将父框设置为display:table-cell，再设置vertical-align:middle。

<div class="parent">
   <div class="child">Demo</div>
</div>

<style>
   .parent {
      display: table-cell;
      vertical-align: middle;
   }
</style>

// 优点：兼容性好，ie8以上均支持（以下版本需要调整页面结构为table）

</div>

<style>

.parent {

display: table-cell;

vertical-align: middle;

}

</style>

// 优点：兼容性好，ie8以上均支持（以下版本需要调整页面结构为table）

[2] absolute + transform

[ 原理 ] 类似于水平居中时的absolute+transform原理。将子框设置为绝对定位，移动子框，使子框上边距离相对框上边边框的距离为相对框高度的一半，再通过向上移动子框的一半高度以达到垂直居中。当然，在此之前，我们需要设置父框为相对定位，使父框成为子框的相对框。

[ 用法 ] 先将父框设置为position:relative，再设置子框position:absolute，top:50%，transform:translateY(-50%)。

<div class="parent">
   <div class="child">Demo</div>
</div>

<style>
   .parent {
      position: relative;
   }
   .child {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
   }
</style>

// 优点：绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度；
// 缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

</div>

<style>

.parent {

position: relative;

}

.child {

position: absolute;

top: 50%;

transform: translateY(-50%);

}

</style>

// 优点：绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度；

// 缺点：transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

[3] flex + align-items

[ 原理 ] 通过设置CSS3中的布局利器flex中的属性align-times，使子框垂直居中。

[ 用法 ] 先将父框设置为position:flex，再设置align-items:center。

<div class="parent">
   <div class="child">Demo</div>
</div>

<style>
   .parent {
      display: flex;
      align-items: center;
   }
</style>

// 优点：只需设置父节点属性，无需设置子元素
// 缺点：兼容性存在一定问题

</div>

<style>

.parent {

display: flex;

align-items: center;

}

</style>

// 优点：只需设置父节点属性，无需设置子元素

// 缺点：兼容性存在一定问题

水平与垂直居中

[ 页面效果 ]子元素于父元素垂直及水平居中且其（子元素与父元素）高度宽度均可变

[1] inline-block + text-align + table-cell + vertical-align

[ 用法 ] 使用inline-block+text-align水平居中，再用table-cell+vertical-align垂直居中，将二者结合起来。

详见：水平居中的 1 和垂直居中的 1 。

<div class="parent">
   <div class="child">Demo</div>
</div>

<style>
   .parent {
      text-align: center;
      display: table-cell;
      vertical-align: middle;
   }
   .child {
      display: inline-block;
   }
</style>

// 优点：兼容性好

</div>

<style>

.parent {

text-align: center;

display: table-cell;

vertical-align: middle;

}

.child {

display: inline-block;

}

</style>

// 优点：兼容性好

[2] absolute + transform

[ 用法 ] 将水平居中时的absolute+transform和垂直居中时的absolute+transform相结合。

详见：水平居中的 3 和垂直居中的 2 。

<div class="parent">
   <div class="child">Demo</div>
</div>

<style>
   .parent {
      position: relative;
   }
   .child {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
   }
</style>


// 优点：绝对定位脱离文档流，不会对后续元素的布局造成影响；
// 缺点：transform为 CSS3 属性，有兼容性问题。

</div>

<style>

.parent {

position: relative;

}

.child {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

</style>

// 优点：绝对定位脱离文档流，不会对后续元素的布局造成影响；

// 缺点：transform为 CSS3 属性，有兼容性问题。

[3] flex + justify-content + align-items

[ 用法 ] 通过设置CSS3布局利器flex中的justify-content和align-items，从而达到水平垂直居中。

详见：水平居中的 4 和垂直居中的 3 。

<div class="parent">
   <div class="child">Demo</div>
</div>

<style>
   .parent {
      display: flex;
      justify-content: center;
      align-items: center;
   }
</style>

// 优点：只需设置父节点属性，无需设置子元素；
// 缺点：有兼容性问题。

</div>

<style>

.parent {

display: flex;

justify-content: center;

align-items: center;

}

</style>

// 优点：只需设置父节点属性，无需设置子元素；

// 缺点：有兼容性问题。