css实现水平垂直居中的n中方式

基本布局

<div id="wrap">
 <main></main>
</div>
<style>
#wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
main {
  width: 400px;
  height: 200px;
}
</style>

absolute+margin

通过绝对定位将元素，元素左上角相对于父级的中心点定位，在通过margin-top和margin-left将元素中心点位移到父级中心点 优点：margin在父元素大小未知的情况，不会随屏幕的缩放位移。常用于固定在背景图中的某个未知。

main{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -100px;
  margin-left: -200px;
}

absolute+transform

通过绝对定位将元素，元素左上角相对于父级的中心点定位，在通过transform相对元素本身分别偏移50%。 优点：修改main的宽高，不需要修改transform。

main {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50% -50%)；
}

display:grid

父元素网格布局，子元素相对于父级弹性居中 优点：grid的功能或许flex更为强大，因为可以实现子元素的自由排列 缺点：适配不是很好

#wrap {
  display: grid; 
}
main {
  align-self: center;
  justify-self: center;
}

display: flex

类似于网格布局，相对于父级弹性居中
优点：位置宽高情况适用、移动端适配好

#wrap {
  display: flex; 
}
main {
  align-item: center;
  justify-content: center;
}

display: table-cell

需要设置父元素的固定宽高,子元素设置非块元素，通过文本居中

#wrap {
  display: table-cell; 
  text-align: center;
  vertical-align: middle;
}
main {
  display: inline/inline-block/inline-table;
}