知識點滴 HTML5元素垂直居中那些事

讓乙個元素水平居中對於css來說非常簡單：如果是乙個內聯元素，我們可以在他的父元素上設定text-align:center;；如果是乙個塊元素，我們可以使用margin:auto;。然而，只要一想到讓乙個元素垂直居中，讓人死的心都有了。

多年來，垂直居中已成為css的不朽神話，也是前端專業人士群體中的乙個內部笑話。原因是：

經常需要使用

理論上看上去非常簡單

過去實戰中要實現是極其困難，特別是元素大小固定時

1.絕對定位解決方案

2.視窗單位的解決方案

3.flexbox的解決方案

h1,ph1p

center me, please!p>
div>正常沒有居中的情況
最早實現垂直居中的技術是元素需要乙個固定的寬度和高度：
方式一div

div

顯然，這種方法最大的問題是，元素需要乙個固定的尺寸，而需要垂直居中元素的尺寸常常是需要由它的內容來決定。如果我們有辦法使用百分比來控制元素尺寸，我們的問題就解決了。不幸的是，對於大多數css屬性（包括margin）百分比的值是相對於其父元素的寬度來決定。

在css中常常可以看到很多解決方案是不可思議。在這個例中，就可以使用css3的transform。可以在transform中的translate()使用百分比，讓元素移動是相對於自身的寬度和高度，這種方案正是我們需要的。

絕對定位通常不是乙個很好的選擇，因為它對整體的布局影響相當的大。

如果垂直居中元素的內容比視窗高度更高的話，它的頂部會被裁剪掉，如下圖所示。但是這個問題可以解決，只不過需要使用一些hack手段。

在一些瀏覽器中，可能會導致元素出現略微的模糊，那是因為元素有可能被放置在半個畫素位置上。我們可以通過transform-style:preserve-3d來解決，儘管這是乙個hack手段，不能保證它不會過時。

css values and units level 3定義了一種新的單位，稱為相對視窗(viewport-relative)長度單位。

vw是相對於視窗的寬度。與你預期剛好相反,1vw相當於視窗寬度的1%，而不是100%

與vw相似的是，1vh相當於視窗高度的1%

如果視窗的寬度小於高度，1vmin等於1vw，反之，如果視窗寬度大於高度，1vmin等於1vh

如果視窗的寬度大於高度，1vmax等於1vw，反之，如果視窗寬度小於高度，1vmax等於1vh

在這個示例中，我們需要給margin的值設定vh單位：

這無疑是最好的解決方案，因flexbox的出現就是為了解決這樣的問題。其他解決方案仍然可用，唯一原因是他們能更好的在瀏覽器上呈現，不過flexbox在現代瀏覽器也得到更好的好支援。

注意，當使用flexbox和margin:auto時，元素不僅水平居中，而且也會垂直居中。也注意，我們甚至沒有設定寬度(如果我們想要也可以設定)，其實指定的寬度相當於max-content。

我們可以通過align-items和justify-content屬性使設定固定尺寸的

容器裡面的文字居中.

div

知識點滴 HTML5元素垂直居中那些事

一 摘要 讓乙個元素水平居中對於css來說非常簡單 如果是乙個內聯元素，我們可以在他的父元素上設定text align center 如果是乙個塊元素，我們可以使用margin auto 然而，只要一想到讓乙個元素垂直居中，讓人死的心都有了。多年來，垂直居中已成為css的不朽神話，也是前端專業人士群...

知識點滴 HTML5 布局總結

布局總結 1 像這樣的行內標記，定義它的margin top和margin bottom是無效的，除非你把它設定為塊狀元素才可以。display block 2 對於塊狀元素，你可以自由的使用外邊距來定義版式和元素之間的距離。類似 div 等等，3 無論什麼元素，一旦設定為是浮動顯示，就擁有了完整的...

Html5元素的作用（1）

這是網頁設計中定義段落的標記，稱為開始標記，稱為結束標記。把一段話寫在這兩個標記中間，在用瀏覽器瀏覽的時候，瀏覽器會把這一段話顯示為乙個段落。例如 計算機應用能力已經成為社會各行各業從業人員最重要的工作技能要求之一，而計算機教材質量的好壞會直接影響人才素質的培養。編寫目標明確，讀者物件針對性強 寫在...