Am I centered yet?
Center me, please!
摘要：与常人的直觉不符的是，实际上表示视口宽度的，而不是。与类似，表示视口高度的。存在问题它只适用于在视口中居中的场景基于的解决方案伸缩盒是专门针对这类需求所设计的。
相关基础知识
1.内部与外部尺寸模型：（w3c草案）亲测google可支持。（http://w3.org/TR/css3-sizing ）
基于原有CSS尺寸特性，可以使CSS更容易描述内容自适应以及适应固定上下文的盒模型： *min-content*:解析为这个容器内 部最大的不可断行元素的宽度(即最宽的单词、图片或具有固定宽度的盒元 素)； *max-content*:类似于我们在前面看到的display: inline- block ； *fit-content*:行为与浮动元素是相同的 。
2.可控表格布局：
*table-layout* （CSS2.1）属性: 默认值是 auto：其行为模式被称作自动表格布局算法，也就是我们最 为熟悉的表格布局行为 ； *fixed：*固定表格布局算法，这个值的行为要明显可控一些。它把更多的控制权交给了网页开 发者，只把较少的控制权留给渲染引擎 ；常见布局的实现
1.满幅背景定宽内容：
*常用办法：*
footer {
background: #333;
}
.wrapper {
max-width: 900px;
margin: 1em auto;
}
如何避免使用两层结构来实现；
footer {
padding: 1em ;//向下兼容不支持calc的浏览器
//max-width: 900px;
padding: 1em calc(50% - 450px);
background: #333;
}
解释：
CSS 值与单位(第三版)(http://w3.org/TR/css-values-3...定义了 个 calc() 函数，它允许我们在 CSS 中直接以这种简单的算式来指定属性的值。 在这里可以取代内层里margin:auto的效果。
2.水平居中
如果它是一个行内元素， 就对它的父元素应用text-align: center ；
如果它是一个块级元素，就对 它自身应用margin:auto。
3.垂直居中
两种不太理想的方法：表格布局法、行内块法。这里不详细说，想了解可参看：
http://css-tricks.com/centeri... 。
以如下结构为例：
Am I centered yet?
Center me, please!
推荐方法：
基于绝对定位的解决方案：
对于固定宽高的元素进行居中处理：
main {
position: absolute; top: calc(50% - 3em);
left: calc(50% - 9em); width: 18em;
height: 6em;
}
*解释*：特点在与解决如何根据内部元素自身的宽高来计算移动比例。
对于绝大多数 CSS 属性(包括 margin)来说， 百分比都是以其父元素的尺寸为基准进行解析的 ；
translate() 变形函数中使用百分比值时，是以这个元素自身的宽度和高度 为基准进行换算和移动的；
解决方法：
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
存在问题：
需要绝对定位，而且如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视 口裁切掉
基于适口单位的解决方案：
CSS 值 与 单 位( 第 三 版 )(http://w3.org/TR/css-values-3... relative-lengths)定义了一套新的单位，称为视口相关的长度单位 ：
vw 是与视口宽度相关的。与常人的直觉不符的是，1vw 实际上表示 视口宽度的 1%，而不是 100%。
与 vw 类似，1vh 表示视口高度的 1%。
当视口宽度小于高度时，1vmin 等于 1vw，否则等于 1vh。
当视口宽度大于高度时，1vmax 等于 1vw，否则等于 1vh。
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0; transform: translateY(-50%);
}
存在问题：它只适用于在视口中居中的场景
基于flexbox的解决方案：
Flexbox(伸缩盒)(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...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112239.html
摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...
摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...
摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...
阅读 2646·2021-11-22 09:34
阅读 2582·2021-11-17 09:33
阅读 2974·2021-10-25 09:44
阅读 1026·2021-10-11 10:59
阅读 2183·2021-09-27 13:34
阅读 2666·2021-09-07 10:19
阅读 2003·2019-08-29 18:46
阅读 1418·2019-08-29 12:55
