gitee地址：gitee.com/carrierxia/…
一、实现水平垂直居中布局：
- 【flex布局】display:flex; margin:auto 或 display:flex; justify-content:center; align-items:center
- 【绝对定位+margin:auto】position + left + right + bottom + top + margin:auto
- 【绝对定位+transform】position + transform:translate(-50%, -50%))
- 【块级水平垂直居中】parent->line-height,text-align + child -> inline-block、vertical-align
- 【绝对定位+偏移量】position:absolute + left + top 设置元素偏移量为（50%-宽度/高度的一半）
- 【绝对定位+外边距偏移量】position:absolute + left + top + margin-left + margin-top 外边距偏移负高宽的一半
- 【grid布局】
二、实现水平居中布局
- text-align + display:inline-block
- margin:auto
- positon:relative + left:50% + margin-left: 宽度的一半取负数
- position + left + right + margin:auto
- position + left + transform:translate(-50%)
- flex布局
- grid布局
三、实现垂直居中布局
- line-height + diplay:inline-block + vertical-align:middle
- positon + top:50% + margin-top: 高度的一半取负数
- top + bottom + margin:auto （拉伸元素）
- top + transform:translateY(-50%)
- flex布局 + align-items 或 margin
- grid布局
实现水平垂直居中布局：
- flex布局
<div class="demo1-parent">
<div class="demo1-child">demo1-child</div>
</div>
- position + left + right + bottom + top + margin:auto
<div class="demo2-parent">
demo2-parent
<div class="demo2-child">demo2-child</div>
</div>
- position + transform:translate(-50%, -50%))
<div class="demo3-parent">
demo3-parent
<div class="demo3-child">demo3-child</div>
</div>
- 块级水平垂直居中：parent->line-height,text-align + child -> inline-block、vertical-align
<div class="demo4-parent">
<div class="demo4-child">demo4-child</div>
</div>
- position:absolute + left + top 设置元素偏移量为（50%-宽度/高度的一半）
<div class="demo5-parent">
<div class="demo5-child">demo5-child</div>
</div>
- position:absolute + left + top + margin-left + margin-top 外边距偏移
<div class="demo6-parent">
<div class="demo6-child">demo6-child</div>
</div>
- grid布局
<div class="demo7-parent">
<div class="demo7-child">demo7-child</div>
</div>
position定位：
- static：默认值，静态定位，表示没有定位，元素会按照正常的位置显示，此时 top、bottom、left 和 right 4 个定位属性不会被应用
- relative：相对定位，即相对于元素的正常位置进行定位，可通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。
- absolute：绝对定位，相对于第一个非 static 定位的父级元素进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。
- fixed： 固定定位，相对于浏览器的创建进行定位，可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。
- sticky：粘性定位，是 relative 和 fixed 的结合体，能够实现类似吸附的效果，当滚动页面时效果与 relative 相同，当滚动到屏幕之外时则会自动变成 fixed 的效果
