說起水平垂直居中大家常看到的是使用絕對定位與負margin的配合或者是inline-block配合vertical-align:middle等方法。當然還有其他一些解決方案，比如說，在水平垂直居中系列中介紹了一些制作方案。但這些方案或多或少都存在一些局限性。假設，要垂直水平居中的元素大小是未知的，你要使用絕對定位與負margin配合就難上加難。當然你會說，使用表格將解決我一切所需，的確是這樣，那么除了這些方法，還有別的方案嗎？接下來我們就針對這個自設問題，來一起探討其他幾種實現水平垂直居中的方案。

為了更好的闡述后面的方案，我們這里有一個命題：讓未知大小容器（未知行數的文本）實現水平垂直居中。看到這樣的命題，有人或許會說神經病又來了，如果你也這么認為，就讓當是神病出現了吧。我們不糾結這個，還是看幾種解決方案吧。

方法一：最原始的方式

這種方法用來實現單行垂直居中是相當的簡單的，你只要保證元素內容是單行，并且其高度是固定不變的，你只要將其“line-height”設置成和“height”值一樣就Ok了。不過這種方法局限性太大，只有單行文本的元素才適用，所以在多行元素中是不能使用這種方法的。

Html Markup

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表