Am I centered yet?
Center me, please!
資訊專欄INFORMATION COLUMN
摘要：與常人的直覺不符的是，實際上表示視口寬度的，而不是。與類似，表示視口高度的。存在問題它只適用于在視口中居中的場景基于的解決方案伸縮盒是專門針對這類需求所設計的。
相關基礎知識
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...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112239.html
摘要：現在回到我們這一章節的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。 前言 先來回顧一下前幾章節，我們都說了哪些內容： CSS Reset 歷史 與 Normalize.css 介紹 Normalize.css...
摘要：現在回到我們這一章節的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。 前言 先來回顧一下前幾章節，我們都說了哪些內容： CSS Reset 歷史 與 Normalize.css 介紹 Normalize.css...
閱讀 2770·2021-11-17 09:33
閱讀 3092·2021-10-25 09:44
閱讀 1200·2021-10-11 10:59
閱讀 2396·2021-09-27 13:34
閱讀 2905·2021-09-07 10:19
閱讀 2133·2019-08-29 18:46
閱讀 1535·2019-08-29 12:55
閱讀 928·2019-08-23 17:11
