css实现垂直居中 + Yahoo前端优化十四条军规_面试时需要把雅虎十四条军规背下来吗-CSDN博客

本文链接：https://blog.csdn.net/viciousDear/article/details/51424024

一、css 垂直居中
①单行文本垂直居中
这个应该是很多人都知道的，使父元素的height 与line-height 设置相等就好了

②多行文本垂直居中
实现这个的话，不考虑太多的标签浪费，我们可以用下面这样一个结构

<div class="wrapper">
    <div class="vertical-middle">
        <div>
            <p>this is content</p>
            <p>I will be vertical-middle</p>
        </div>
    </div>
</div>

③子div水平、垂直居中于浮div
这个方法要求知道子div的宽和高，设置子div的position为absolute(你可能知道的是，如果想使用子div相对于父div的absolute的position，必须要设置父元素的position为relative，css中很多属性的设置不是自己本事一个属性设置就能实现的，例如在使用z-index的时候就必须设置当前元素的position为absolute或relative，这个是题外话)，left为50%，margin-left为负宽的一半,这两个是为了水平居中，垂直居中的话就是top为50%,margin-top为负高的一半

④有一个新的flex，它在对于实现布局时可以帮助开发人员做到更方便，如果浏览器允许，可以考虑flex

二、Yahoo前端优化十四条军规
这个主要是为了前端优化，有那么十四条规则，开发人员可以借鉴，提升网站性能，优化用户体验。
第一条、尽可能的减少 HTTP 的请求数（Make Fewer HTTP Requests ）
第二条、使用CDN（内容分发网络）: Use a Content Delivery Network
第三条、添加Expire/Cache-Control 头：Add an Expires Header
第四条、启用Gzip压缩：Gzip Components
第五条、将css放在页面最上面（ Put Stylesheets at the Top）
第六条、将script放在页面最下面（Put Scripts at the Bottom ）
第七条、避免在CSS中使用Expressions （Avoid CSS Expressions ）
第八条、把javascript和css都放到外部文件中（Make JavaScript and CSS External ）
第九条、减少DNS查询 (Reduce DNS Lookups)
第十条、压缩 JavaScript 和 CSS (Minify JavaScript )
第十一条、避免重定向 (Avoid Redirects )
第十二条、移除重复的脚本 (Remove Duplicate Scripts )
第十三条、配置实体标签（ETags） (Configure ETags )
第十四条、使 AJAX 缓存 (Make Ajax Cacheable )