讓我們來談談css中的垂直對齊，或者更確切地說是如何不可行的。 css尚未提供將容器內的內容垂直居中的官方方法。 這個問題可能使各地的web開發人員感到沮喪。 但是不要害怕，在這篇文章中，我們將由您來指導一些技巧，這些技巧可以幫助您模仿效果。
我們將在這裡看到的第乙個技巧是使用position屬性。 您有兩個，乙個是容器，另乙個是包含內容的子元素。
我們將首先將容器元素的位置設定為相對，然後將子元素位置設定為absolute。 這使我們可以將其自由地放置在整個容器中。
要使其垂直對齊，請從頂部將子元素位置移動容器高度的一半，然後將其向上拉動子元素寬度的一半。 這是輸出：
當只有乙個子元素時，此技巧是完美的，否則absolute位置將影響同一容器中的其他元素。
css3 transform使將內容置於中心變得容易。 與position屬性不同， css3 transform不會影響同一容器內其他元素的位置。
假設我們具有與前面的方法相同html結構-乙個父級，乙個子元素-從頂部算起50%，並使用css轉換給出-50%的轉換。 那裡有。
請記住，儘管css3轉換在internet explorer 8及更低版本中不起作用。 您可能要在這裡使用其他任何方法作為備用。
我們還可以使用padding來建立垂直對齊的錯覺。 為此，只需將頂部和底部填充均等設定，如下所示：
如果您沒有將容器設定為固定寬度，而只是將寬度設定為auto，則此技巧非常適合。
如果容器中只有一行文字內容，則可以使用line-height屬性垂直對齊文字。 將line-height值設定為與容器高度大致相同，您將看到以下輸出。
請記住，此技巧僅適用於一行文字。 如果內容分成兩行或更多行，則每行之間的間距將與我們在line-height指定line-height，從而給我們提供了太多的空白。
垂直居中的最後一種方法是使用flexbox。 flexbox是css3中的新模組。 它提供了一種更簡單的對齊內容的方法。 要將內容垂直放置在flex框中，只需新增align-items: center;如下，僅此而已。
請記住，flexbox某些瀏覽器僅支援flexbox模組的部分功能，例如internet explorer 10，safari，6和chrome 27及以下版本。 因此，類似於css3 transform的技巧，請確保在這些瀏覽器中效果很好。
翻譯自:
css垂直對齊
在css中，行框的高度總是足以容納它包含的所有行內級框，當乙個行內級框 b 的高度小於包含它的行框高度時，則由 vertical align屬性 來決定b在行框中垂直對齊的位置。因此，vertical align屬性只對行內級元素有效，對塊級元素無效。並且，該屬性不能被子元素繼承。在垂直對齊時，行內...
CSS之垂直對齊
vertical align baseline 預設。元素放置在父元素的基線上。sub 垂直對齊文字的下標。super 垂直對齊文字的上標 top 把元素的頂端與行中最高元素的頂端對齊 text top 把元素的頂端與父元素字型的頂端對齊 middle 把此元素放置在父元素的中部。bottom 把元...
CSS 布局 水平 垂直對齊
元素居中對齊 要水平居中對齊乙個元素，可以使用 margin auto 設定到元素的寬度將防止它溢位到容器的邊緣 元素通過指定寬度，並將兩邊的空外邊距平均分配 水平居中塊級元素 如 div 可以使用 marig auto 注意 使用 margin auto 無法相容 ie8，除非 doctype 已...