css的垂直居中
在 CSS 中對元素進行水平居中是非常簡單的：如果它是一個行內元素， 就對它的父元素應用 text-align:center; 如果它是一個塊級元素，就對它自身應用 margin:auto。然而如果要對一個元素進行垂直居中，可能光是想想就令人頭皮發麻了。
長久以來，為了解決這一絕世難題，前端開發者們殫精竭慮，琢磨出了各種解決方法，可惜大多數并不實用。在本篇攻略中，我們將探索現代 CSS 的強大威力，以全新的思路去攻克各種場景下的垂直居中難題。請注意，有幾種技巧十分流行，但在這里并不會深入探討，原因如下：
-
表格布局法(利用表格的顯示模式)需要用到一些冗余的 HTML 元素，實現起來不夠優雅簡潔，因此這里不多介紹。
-
行內塊法也不作討論，因為在我看來這種方法 hack 的味道很濃。
如果你有興趣，可以去看看 Chris Coyier 寫的 Centering in the Unknown。這篇出色的文章詳細講述了這兩種技巧。
我們將使用如下所示的結構代碼，并直接插入 元素中（但實際上我們將要探索的這些技巧是與容器無關的）：
<div class="main"><h1>Am I centered yet?</h1><p>Center me, please!</p> </div>
基于絕對定位
我們先來看一個早期的垂直居中方法，它要求元素具有固定的寬度和高度：
.main {position: absolute;top: 50%;left: 50%;margin-top: -3em; /* 6/2 = 3 */margin-left: -9em; /* 18/2 = 9 */width: 18em;height: 6em; }這段代碼在本質上做了這樣幾件事情：
先把這個元素的左上角放置在視口（或最近的、具有定位屬性的祖先元素）的正中心。
然后再利用負外邊距把它向左、向上移動（移動距離相當于它自身寬高的一半），從而把元素的正中心放置在視口的正中心。
借助強大的 calc() 函數，這段代碼還可以省掉兩行聲明：
.main {position: absolute; top: calc(50% - 3em);left: calc(50% - 9em); width: 18em;height: 6em; }顯然，這個方法最大的局限在于它要求元素的寬高是固定的。
在通常情況下，對那些需要居中的元素來說，其尺寸往往是由其內容來決定的。如果 能找到一個屬性的百分比值以元素自身的寬高作為解析基準，那我們的難題就迎刃而解了！遺憾的是，對于絕大多數 CSS 屬性(包括 margin)來說， 百分比都是以其父元素的尺寸為基準進行解析的。
CSS 領域有一個很常見的現象，真正的解決方案往往來自于我們最意想不到的地方。
在這個例子中，答案來自于 CSS Transforms 。當我們在 translate() 變形函數中使用百分比值時，是以這個元素自身的寬度和高度為基準進行換算和移動的，而這正是我們所需要的。接下來，只要換用基于百分比的 CSS 變形來對元素進行偏移，就不需要在偏移量中把元素的尺寸寫死。這樣我們就可以徹底解除對固定尺寸的依賴：
main {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); }當然，沒有任何技巧是十全十美的，上面這個方法也有一些需要注意的地方：
-
我們有時不能選用絕對定位，因為它對整個布局的影響太過強烈。
-
如果需要居中的元素已經在高度上超過了視口，那它的頂部會被視口裁切掉。有一些辦法可以繞過這個問題，但 hack 味道過濃。
-
在某些瀏覽器中，這個方法可能會導致元素的顯示有一些模糊，因 為元素可能被放置在半個像素上。這個問題可以用transform-style:preserve-3d?來修復，不過這個修復手段也可以認為是一個 hack，而且很難保證它在未來不會出問題。
基于 viewport
假設我們不想使用絕對定位，仍然可以采用 translate() 技巧來把這 個元素以其自身寬高的一半為距離進行移動；但是在缺少 left 和 top 的情況下，如何把這個元素的左上角放置在容器的正中心呢？
我們的第一反應很可能是用 margin 屬性的百分比值來實現，就像這樣：
.main {width: 18em;padding: 1em 1.5em;margin: 50% auto 0; transform: translateY(-50%); }不過，如圖所示，這段代碼會產生十分離譜的結果：
原因在于 margin 的百分比值是以父元素的寬度作為解析基準的 。沒錯，即使對于 margin-top和 margin-bottom 來說也是這樣！
不過幸運的是，如果只是想把元素相對于視口進行居中，仍然是有希望的。【CSS Values and Units Module Level 3】(https://www.w3.org/TR/css-values-3/#relative-lengths) 定義了一套新的單位，稱為 viewport 相關的長度單位。
-
vw ：1% of viewport’s width
-
vh ：1% of viewport’s height
-
vmin ：1% of viewport’s smaller dimension
-
vmax ：1% of viewport’s larger dimension
在我們的這個例子中，適用于外邊距的是 vh 單位：
main {width: 18em;padding: 1em 1.5em;margin: 50vh auto 0; transform: translateY(-50%); }可以看到，其效果堪稱完美。當然，這個技巧的實用性是相當有限的，因為它只適用于在視口中居中的場景。
基于 Flexbox
這是毋庸置疑的最佳解決方案，因為 Flexbox 是專門針對這類需求所設計的。我們之所以要討論其他方案，僅僅是因為那些方案在瀏覽器的支持程度上稍微好一些而已。但其實目前現代瀏覽器對 Flexbox 的支持度已經相當不錯了。
我們只需寫兩行聲明即可：
-
先給這個待居中元素的父元素設置?display:flex（在這個例子中是?<body>?元素）。
-
-
再給這個元素自身設置我們再熟悉不過的?margin:auto（在這個例子中是?<main>?元素）。
body {display: flex;min-height: 100vh;margin: 0; } main {margin: auto; }請注意，當我們使用 Flexbox 時，margin: auto 不僅在水平方向上將元素居中，垂直方向上也是如此。還有一點，我們甚至不需要指定任何寬度(當然，如果需要的話，也是可以指定的)：這個居中元素分配到的寬度等于 max-content。
如果瀏覽器不支持 Flexbox，頁面渲染結果看起來就跟我們的起點圖是一樣的了(如果設置了寬度的話)。雖然沒有垂直居中效果，但也是完全可以接受的。
Flexbox 的另一個好處在于，它還可以將匿名容器(即沒有被標簽包裹的文本節點)垂直居中。舉個例子，假設我們的結構代碼是：
<div class="main"> Center me, please! </div>我們先給這個 .main 元素指定一個固定的尺寸，然后借助 Flexbox 規范 所引入的 align-items和 justify-content 屬性，我們可以讓它內部的文本也實現居中：
main {display: flex;align-items: center;
justify-content: center;
width: 18em;height: 10em; }
-
-
轉載于:https://www.cnblogs.com/weizhanyu/p/10218959.html
總結
- 上一篇： VMware与Centos7系统安装
- 下一篇： 【LeetCode 剑指offer刷题