相关基础知识1.内外尺寸模型：（w3c草案）亲测google可以支持。(http://w3.org/TR/css3-sizing)基于原有的CSS尺寸特征，可以让CSS更容易描述内容适配，适配固定上下文的盒模型：*min-content*:解析到本容器内最大的不可破坏元素的宽度（即固定宽度的最宽的word、图片或box元素）；*max-content*：类似于我们之前看到的display:inline-block；*fit-content*：行为与浮动元素相同。2、可控表格布局：*table-layout*(CSS2.1)属性：默认值为auto：其行为方式称为自动表格布局算法，也就是我们最熟悉的表格布局行为；*fixed:*fixed对于表格布局算法来说，这个值的行为显然更可控。它为Web开发人员提供了更多的控制权，而只给渲染引擎留下了更少的控制权；常见布局的实现1.全宽背景固定宽度Content:*常用方法:*footer{background:#333;}.wrapper{max-width:900px;margin:1emauto;}如何避免使用二层结构;footer{padding:1em;//向后兼容不支持calc的浏览器//max-width:900px;填充：1em计算（50%-450px）；背景：#333;}解释：CSSValuesandUnits(ThirdEdition)(http://w3.org/TR/css-values-3...定义了一个calc()函数，可以让我们直接指定属性的值用CSS中这个简单的公式，这里可以代替内层margin:auto的效果2.水平居中如果是内联元素，会在其父元素上应用text-align:center元素；如果是块级元素，给自身应用margin:auto3.垂直居中两种不太理想的方法：table布局法和inlineblock法，这里就不赘述了，如果想了解更多，请参考：http://css-tricks.com/centeri...。以如下结构为例：

我居中了吗？

请居中！

推荐方法：基于绝对定位的解决方案：固定宽度高位元素居中：main{position:absolute;顶部：计算（50%-3em）；左：计算（50%-9em）；宽度：18em；height:6em;}*说明*:特点及解决方案如何根据内部元素本身的宽高计算移动比例。对于大多数CSS属性（包括边距），百分比是根据其父元素的大小来解析的；在translate()转换函数中使用百分比值时，是根据元素本身的宽高进行转换和移动；解决方案：主要{位置：绝对;顶部：50%；左：50%；转换：翻译（-50%，-50%）；}有一个问题：需要绝对定位，如果需要居中如果元素高度已经超过视口，它的顶部会被视口裁剪基于可口单位的解决方案：CSSValuesandUnits(第三版）（http://w3.org/TR/css-values-3...relative-lengths）定义了一组新的单位，称为与视口相关的长度单位：vw是相对于视口宽度的。与直觉相反，1vw实际上意味着视口宽度的1%，而不是100%。与vw一样，1vh表示视口高度的1%。当视口宽度小于高度时，1vmin等于1vw，否则等于1vh。当视口宽度大于其高度时，1vmax等于1vw，否则等于1vh。主要{宽度：18em;填充：1em1.5em；保证金：50vh自动0；变换：翻译Y(-50%)；有一个问题：它只适用于以视口为中心的场景flexbox-based解决方案：Flexbox(stretchBox)(http://w3.org/TR/css-flexbox)是专门为此类需求而设计的。*解决方案：*body{display:flex;min-height:100vh;margin:0;}main{margin:auto;}*解释：*当我们使用Flexbox时，margin:auto不仅使元素水平居中，而且在垂直方向居中。有一个问题：兼容性没有前两者广泛。以后可能常用的方法：框对齐模型http://w3.org/TR/css-align-3)简单居中，不需要特殊的布局方式，只需要align-self:center；足够。小科普：W3C标准从提案到正式规范的过程：https://www.zhihu.com/questio...