居中方案

居中方案

• 水平居中
  • 行内元素
    • 父元素设置text-align:center
  • 定宽块元素
    • 设置 margin 左右为 auto
    • 块元素文本居中设置text-align:center
  • 不定宽块元素
    • 设置 display 为 table，margin 左右为 auto
      利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
    • 设置 display 为 inline 或 inline-block，按行内元素居中处理
    • 给父元素设置float:left position:relative 和 left:50%，且：
      float隐性改成了display:inline-block使得div获得宽度自适应特性（这是关键），本质是触发了BFC。所以换成​ display:inline-block 或 display:flex也可以。或者不要float:left position:relative ，直接写成position:absolute等。
      • 子元素设置 position:relative 和 left: -50% 来实现水平居中，会溢出父元素盒模型
      • 或者使用css3的transform: translateX(-50%)，效果一样，会溢出父元素盒模型
      • 子元素还可以用 margin-left：-50% 来居中，但是这样会使子元素宽度变为实际宽度的1.5倍
• 垂直居中
  • 父元素高度确定的单行文本
    • 设置父元素的 height 和 line-height 高度一致。
      line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。
  • 父元素高度确定的多行文本
    • 设置父元素 display:table
    • 用一个元素包裹多行标签元素，设置 display:table-cell 和 vertical-align:middle
  • 父子元素高度未知
    • 设置父元素 position:relative
    • 设置子元素 position: absolute top: 50% transform: translateY(-50%)
• flex(不兼容IE)
  • 父元素设置
  • display:flex;/*Flex布局*/
  • display: -webkit-flex; /* Safari */
• 附：隐性改变display类型
  • 元素（不论之前是什么类型元素，display:none 除外）
  • 设置以下 2 个句之一：
  • position : absolute
  • float : left 或 float:right
  • 元素的display显示类型就会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。