CSS居中的几种实现

1、定位+margin/transform

    div {
      position: absolute;
      left: 50%;
      top: 50%;
      /* 用margin不好控制，如果长款变了,margin也要变 */
      /* margin-left: -100px;
      margin-top: -100px; */
      /* 还可以用这个属性来达到动态改变位置（相当于动态margin，是动画里面的一个属性） */
      transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
    }

2、flex布局

太简单了，记录一下就行

3、容器的line-height 等于 容器的高度（文本、inline元素的竖直居中）

这个居中方式只针对子元素为diplay:inline的元素或文本元素，如果子元素为inline-block或者block，会出现子元素的文本内容居中了而子元素这个盒子还处在原位置的情况。

4、直接设置父盒子的line-height来实现子元素为文本和inline的居中

line-heigh只对父盒子为block或者inline-block的且元素内有文本的元素有效，line-height这个属性是可以继承的，所以我们可以在inline-block或者block元素当中有文本元素时，来直接设置父盒子的line-height来使文本居中并且顺便设置了父元素的高度。

5、居中元素设置margin: 0 auto（block元素的水平居中）

这个可以实现子元素为块级元素(block)的水平居中，子元素为inline-block或者inline都不行。当然了，父元素必须要有宽度，或者为block元素（自动撑开的宽度）。

6、父元素设置text-align: center（文本、inline-block,、inline的水平居中）

7、在居中元素设置了宽（高）后（or both）需要，再设置为绝对定位，left、right（top、bottom）相等，再把对应的两边margin设置为auto就可以在水平方（竖直方向）上居中了。

8、直接用绝对定位设置宽高，上下一样，上下就居中，左右一样左右就居中

9、还有其他的，多敲敲多复习，不要只看