CSS相关之定位之居中整理

一、水平居中

1.inline元素只需要设置text-align: center;

ps: 设置行内元素（子元素）可不行，需要设置它的父元素，那么子元素可以得到继承从而实现水平居中

2.block元素只需要设置margin: auto;

auto的含义代表填充剩余空间。如margin-left: auto; 左边剩余空间填满，margin-right: auto;右边剩余空间填满。(类似于flex布局中的flex: 1;margin: auto;代表的是左右均分）

<div class="container container2">
    <div style="width: 200px; background-color: yellow;">巴拉巴拉巴拉</div>
    <div class="item">block元素居中</div>
  </div>

.container2 .item {
      width: 500px;
      /* margin: auto; */
      margin-right: 20px;
      margin-left: auto;
    }

3.absolute元素1.left: 50%; 2.margin-left: -var(元素宽度的一半);

解释1：left为上层设置了定位元素的元素为参考-----那个元素的宽度的50%，正好左边距居中，上图举例子

container3

                                                                        body

至于为什么需要元素宽度的一半，那应该显而易见了

二、垂直居中

1.inline元素设置line-height为父元素的height；

2.block元素设置height || line-height 为父元素的height；

3.absolute元素设置left: 50%; margin-left: -元素宽度的一半；top: 50%; margin-top: -元素宽度的一半（通过计算）

4.absolute元素设置left: 50%; top: 50%; transform: translate(-50%, -50%)（左移宽度的一半，上移高度的一半，兼容性不强）

5.absolute元素设置top: 0; left: 0; right: 0; bottom: 0; margin: auto;（终极完美方案，兼容性强👍🏻）

每次进步一点点...