html页面不同分辨率下居中显示同样效果

本篇文章对于一些刚步入web前端的小伙伴可能会有很大帮助

刚步入前端的小伙伴经常会遇到这样一个问题：我们写好的页面，在不同分辨率下，显示就不如人意了。

出现这种问题的主要原因就是页面在当前分辨率下，使用了定死的宽度或者统一浮动到了左侧，这样放在大的分辨率下，整个页面会出现整体向左的现象，解决这种问题有两种方案：

1.使用包裹标签，内容的标签使用margin: 0 auto;

css:
.wrap{width: 100%}
.container{width:1070px;height:300px;background: #f2f2f2;margin: 0 auto;}
html:
<div class="wrap">
    <div class="container"></div>
</div>

需要注意的是：内容的宽度必须要有固定的值，然后相对于包裹的宽度（分辨率宽度）居中

2.如果使用了定位的话：

css:
.wrap{width: 100%;position: relative;}
.container{width:1070px;height:300px;background: #f2f2f2;position: absolute;left:50%;margin-left: -514px}
html:
<div class="wrap">
    <div class="container"></div>
</div>

只需要left:50%,然后margin-left: -（width/2）就可以了

转载于:https://www.cnblogs.com/zj1024/p/8831157.html