水平垂直居中的总结

博客原文：http://longtean.top/2017/07/28/%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E5%8F%8Aflex%E5%B8%83%E5%B1%80/

如果要实现水平居中，严格来说满足以下条件才能称为水平居中：①父元素必须是块级盒子容器②父元素宽度必须已经被设定好

假设有以下场景，子元素是块级元素，但是没有设置宽度，那么就会充满整个父元素；
子元素是行内元素，宽度由自身内容撑开； 可以设置text-align实现；
最常见的是 子元素是块元素，宽度已经确定：①：margin:0 auto
②通过计算 设置父元素的padding为子元素宽高的一半 （此处可以设置box-sizing:boeder-box(元素宽高为content，默认是width+padding+margin)）；也可以设置子元素margin
③绝对定位

垂直居中

同样的，父元素是块级元素，有高度
​

假设以下场景，①子元素行内，高度是内容撑开，可以设置父元素 line-height为子元素高度
②子元素是块级元素，但是没有设置高度（无法设置margin，padding），但是可以给父元素设定 display:table-cell;vertical-align:middle; flex方法也可以（父元素 flex ; flex-drection;justify- content:center）
③子元素是块级元素高度确定，可以设置子元素margin，父元素padding
绝对定位

水平垂直居中
​

• flex
  父元素设置display：flex;justify-content:center;align-items:center;
  • 示例
    <iframe height='265' scrolling='no' title='jLbmzQ' src='//codepen.io/longtean/embed/jLbmzQ/?height=265&theme-id=0&default-tab=css&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/longtean/pen/jLbmzQ/'>jLbmzQ</a> by LongTean (<a href='https://codepen.io/longtean'>@longtean</a>) on <a href='https://codepen.io'>CodePen</a>.
    </iframe>
    ​
    ​
• absolute
  ​
  <iframe height='265' scrolling='no' title='jLbmzQ' src='//codepen.io/longtean/embed/jLbmzQ/?height=265&theme-id=0&default-tab=css&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/longtean/pen/jLbmzQ/'>jLbmzQ</a> by LongTean (<a href='https://codepen.io/longtean'>@longtean</a>) on <a href='https://codepen.io'>CodePen</a>.
  </iframe>
  ​
• margin:auto
  父元素设置relative 子元素 绝对定位 ；margin：auto； left：0；top:0;right:0;bottom:0;
• 负margin法
  绝对定位top和left50%；然后设置负向margin“补偿”回一半 （其实也可以设置成其他百分比，因为浏览器对盒子模型解析不同，都需要使用ｍａｒｇｉｎ来调节）

    .container{
          width: 500px;
          height: 400px;
          border: 2px solid #379;
          position: relative;
     }
     .inner{
          width: 180px;
          height: 210px;
          background-color: #746;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -90px; /*height的一半*/
          margin-left: -105px; /*width的一半*/
     }

​

• table-cell法
  父级元素 dispaly:table-cell;vertical-align:middle;text-align:center;
  子元素必须是行内元素 设置 vertical-align：middle;

总结flex布局

      flex布局的核心概念是`容器`和`轴` ，分别是父容器和子容器，主轴和交叉轴，（可以使用）

• 容器
  • 特点：容器具有这样的特点：父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准
  • 常用属性：
    • 父容器：
      • ①justify-content: 用来设置子容器如何沿着主轴排列 flex-start | flex-end | center | space-between | 起始端对齐|居中端对齐|末尾端对齐 | 均匀分布
      • ②align-items: 用来设置子容器如何沿着交叉轴分配纸容器之间的距离 flex-start | flex-end | center | baseline | stretch | 沿基线对齐 | 尺寸拉伸与父元素一直
  • 子容器：
    • ①flex 如何在主轴上伸缩 单值 | 两个值 | 三个值 | none
      • 宽/高 ：10em . 30px auto content
      • 无单位 ： 1 2
      • 1 30px
      • 2 2
      • 1 1 10%
    • ②align-self; 设置子容器沿交叉轴分布 可选属性同父容器align-items 以子容器设置为主
• 轴：
  * flex-direction: 决定主轴方向 主轴交叉轴垂直
• 其他属性
  • 父容器
    • flex-wrap :决定子容器是否换行排列：nowrap | wrap | wrap-reverse | 不换行 | 换行 | 反向换行
    • align-content : 设置多行子容器之间的对齐方式 方式同 align-items
  • 子容器
    • flex-basis : 在不伸缩情况下子容器的原始尺寸 主轴横代表宽度 纵向 代表高度
    • flex-grow : 子容器弹性伸缩的比例
    • order : 顺序