剧中总结！

• 水平居中

  1. 绝对定位+left+margin-left

  .first{
      position: absolute;
      left: 50%;
      margin-left: -50px;//也就是1/2width
  }

  <!--more-->

  ☠️必须得知道物体的宽高

  ---

  2.绝对定位+left+transform

  .second{
      position: absolute;
      left:50%;
      -webkit-transform: translate(-50%);
      -moz-transform: translate(-50%);
      -ms-transform: translate(-50%);
      -o-transform: translate(-50%);
      transform: translate(-50%);
  }

  😍transform的妙用，translate位移是针对自身的，所以可以不知道自身的宽度，是上面的升级版。

  ---

  3.绝对定位+margin+左右

  .third{
       margin:auto;
       position: absolute;
       left:0;
       right:0;
   }

  😍margin的妙用，如果设置左右为0，那么水平居中，如果设置上下左右都为0，那么就在整个页面居中（也就是水平也居中垂直也居中），换言之，如果值设置上下为0，那么垂直方向居中。

  ---

  4.flex布局

  .box{
    display:flex;
    justify-content:center;
  }

  😍很简洁的样子，给父元素设置两行就能做到水平居中了

  ---

  • 相对定位+margin

  .fouth{
      position:relative;
      margin:x auto x;//x代表随意的数值
  }

  😍好简洁

  ---

  5.text-align

  .box{
      text-align:center;
  }

  😍text-align属性只对行内元素有效，比如图片、文字、span等，当然也能让它对div奏效，把块级元素设为行内元素就行了。这个属性是设置在父盒子上面的。一般用来设置图片和文字居中比较多。

  ---

• 垂直居中

  1.line-height

  .box{
    line-height:50px;
  }

  😍设置行高，子元素会垂直居中，不论是行内还是块级子元素都有效。 ☠️只对单行文字有效。

  ---

  2.多行文字垂直居中

  //第一种
  .box{
    display:table;
    height:200px;
  }
  .child{
    display:table-sell;
    vertical-aligh:middle;
  }
  //第二种
  .box{
    display:table-sell;
    height:200px;
    vertical-align:middle;
  }
  .child{
    display:inline-block;
  }

  👉vertical-align是用来指定行内元素和表格单元格（table-sell）元素的垂直对齐方式