居中样式——html

元素如何居中

• 检测屏幕大小，根据屏幕大小设置相应的宽高

  因此我们需要了解屏幕尺寸标准以便更好地设计不同设配上显示的问题

  超小屏幕	小屏幕	中等屏幕	大屏幕
  <768px	>=768px	>=992px	>=1200px

  除此之外我们还要考虑设配像素比（DPR）对其产生的影响，当然可以通过window.devicePixelRatio获取设配像素比。

• 通过rem实时更新视图大小

暂时不考虑超小屏幕上面显示页面的问题

先将桌面页面设计出来，再对其他设备展示页面进行设计。请不要本末倒置，减缓项目开发速度。

固定布局居中

.fixed-center{
    position: fixed;
    top: 50%;
    right: 50%;
}

弊端：需要子级元素使用负数指定相对定位。

场景：适合相对窗口固定的布局，例如做一个页面一直悬浮的按钮。

绝对布局居中

.absolute-center{
    position: absolute;
    margin: auto;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
}

弊端：需要决定父级容器的大小以及指定自身元素大小。

特点：不是以浏览器为基准，而是以上级非position: static;元素为基准。

场景：适合跟随浏览器变动的布局，例如做一个页面固定区域的按钮。

弹性布局居中

.flex-center{
    display: flex;
    align-items:center;
    justify-content:center;
}

弊端：需要决定自身容器大小，作用于子级元素。