方法一
思路：顯示設定父元素為：table，子元素為：cell-table，這樣就可以使用vertical-align: center，實現水平居中
優點：父元素（parent）可以動態的改變高度（table元素的特性）
缺點：ie8以下不支援
lang="en">
charset="utf-8">
未知寬高元素水平垂直居中title>
head>
.parent1
.parent1
.child
style>
class="parent1">
class="child">hello world-1div>
div>
body>
html>
思路：使用乙個空標籤span設定他的vertical-align基準線為中間，並且讓他為inline-block，寬度為0
缺點：多了乙個沒用的空標籤，display:inline-blockie 6 7是不支援的(新增上：_zoom1;*display:inline)。
當然也可以使用偽元素來代替span標籤，不過ie支援也不好，但這是後話了
lang="en">
charset="utf-8">
未知寬高元素水平垂直居中title>
head>
.parent2
.parent2
span
.parent2
.child
style>
class="parent1">
class="child">hello world-1div>
div>
class="parent2">
span>
class="child">hello world-2div>
div>
body>
html>
思路：子元素絕對定位，距離頂部 50%，左邊50%，然後使用css3 transform:translate(-50%; -50%)
優點：高大上,可以在webkit核心的瀏覽器中使用
缺點：不支援ie9以下不支援transform屬性
lang="en">
charset="utf-8">
未知寬高元素水平垂直居中title>
head>
.parent3
.parent3
.child
style>
class="parent3">
class="child">hello world-3div>
div>
body>
html>
思路：使用css3 flex布局
優點：簡單 快捷
缺點：相容不好吧，詳情見：
lang="en">
charset="utf-8">
未知寬高元素水平垂直居中title>
head>
.parent4
.parent4
.child
style>
div> class="parent4">
class="child">hello world-4div>
div>
body>
html>
未知寬高元素垂直水平居中
最近加班像個牛一樣，很久沒來貼吧逛逛了，深感抱歉 上次有朋友發了個完美讓元素水平垂直居中的帖子，但是貌似僅限已知寬高的元素 沒仔細看，說錯了道歉 這次分享一下未知寬高元素水平垂直的方法。如果你曾經研究過水平垂直居中的方法，那麼下面這幾個方法你肯定知道 下面介紹的方法主要是利用display inli...
寬高未知垂直水平居中
寬高未知情況下垂直水平居中很多情況下都會遇到 查了蠻多大家分享的小例子，我也來記錄一下 這裡是css3的 transform 屬性，可以在ie9及以上的瀏覽器水平垂直居中chrome firefox也是沒有問題 這裡是一段話這裡是一段話 這裡是一段話這裡是一段話 這裡是一段話這裡是一段話 total...
未知寬高元素垂直居中
給父元素display table 子元素display cell table,vertical align center，子元素即可居中 子元素絕對定位，top50 left50 transform translate 50 50 父元素flex，align items center justif...