爲什麼width：100％不能在div {display：table-cell}上工作？

Question

我想垂直和水平居中一些內容覆蓋圖像幻燈片（flexslider）。有一些類似的問題，但我找不到一個令人滿意的解決方案，直接適用於我的具體問題。由於FlexSlider的限制，我不能在我的實現中使用img標籤上的position: absolute;。

我幾乎有下面的解決方法工作。唯一的問題是我無法獲得寬度&高度聲明inner-wrapper div與display: table-cell屬性。

這是標準行爲，還是我錯過了我的代碼？如果這是標準行爲，那麼對我的問題最好的解決方案是什麼？

HTML

<ul> 
    <li> 
     <img src="#"> 
     <div class="outer-wrapper"> 
      <div class="inner-wrapper"> 
       <h1>My Title</h1> 
       <h5>Subtitle</h5> 
      </div> 
     </div> 
    </li> 
</ul> 

CSS

html, body { 
    margin: 0; padding: 0; 
    width: 100%; height: 100%; 
} 

ul { 
    background: #CCC; 
    height: 100%; 
    width: 100%; 
    list-style-position: outside; 
    margin: 0; padding: 0; 
} 

li { 
    width: 100%; 
    display: table; 
} 

img { 
    width: 100%; 
    height: 410px; 
} 

.outer-wrapper { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    margin: 0; padding: 0; 
} 

.inner-wrapper { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    width: 100%; 
    height: 100%; 
} 

注：該中心的內容將超過1元，所以我不能使用的line-height伎倆。

jsFiddle。

Answer 1

把display:table;內.outer-wrapper似乎工作...

JSFiddle Link

---

編輯：兩包裝使用顯示錶單元格

我想對你的解答發表評論，但我有太少代表:(反正...

都會響起your answer，好像所有你需要做的就是添加display:table;內.outer-wrapper（幻覺記憶？），你可以全心全意地擺脫table-wrapper。

JSFiddle

但是，是的，在position:absolute讓您將div在img，我也趕緊閱讀並認爲你不能使用position:absolute所有，但好像你理解了它了。道具！

我沒有要發佈的源代碼，畢竟其99％timshutes的工作，所以請參考他的答案，或者只是用我的jsfiddle鏈接

更新：一個包裝使用Flexbox的

它已經有一段時間，和所有時尚的年輕人使用Flexbox的：

<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;"> 
    stuff to be centered 
</div> 

Full JSFiddle Solution

瀏覽器支持（source）：IE 11+，火狐42+，鉻46+，Safari瀏覽器8+的iOS 8.4+（-webkit-前綴），機器人4.1+（-webkit-前綴）

CSS Tricks: a Guide to Flexbox

How to Center in CSS：輸入您希望您的內容如何居中，並輸出如何在html和css中執行此操作。未來就在這裏！

Answer 2

How about this? (jsFiddle link)

CSS

ul { 
    background: #CCC; 
    height: 1000%; 
    width: 100%; 
    list-style-position: outside; 
    margin: 0; padding: 0; 
    position: absolute; 
} 
li { 
background-color: #EBEBEB; 
    border-bottom: 1px solid #CCCCCC; 
    border-right: 1px solid #CCCCCC; 
    display: table; 
    height: 180px; 
    overflow: hidden; 
    width: 200px; 
} 
.divone{ 
    display: table-cell; 
    margin: 0 auto; 
    text-align: center; 
    vertical-align: middle; 
    width: 100%; 

} 
img { 
    width: 100%; 
    height: 410px; 
} 
.wrapper { 
    position: absolute; 
} 

Answer 3

我想出了這一個。我知道這有助於某個人。

如何垂直&水平居中一個DIV在相對位置的影像

的關鍵是第三個包裝。我會投票任何使用較少包裝的答案。

HTML

<div class="wrapper"> 
    <img src="my-slide.jpg"> 
    <div class="outer-wrapper"> 
     <div class="table-wrapper"> 
      <div class="table-cell-wrapper"> 
       <h1>My Title</h1> 
       <p>Subtitle</p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

html, body { 
margin: 0; padding: 0; 
width: 100%; height: 100%; 
} 

ul { 
    width: 100%; 
    height: 100%; 
    list-style-position: outside; 
    margin: 0; padding: 0; 
} 

li { 
    width: 100%; 
    display: table; 
} 

img { 
    width: 100%; 
    height: 100%; 
} 

.outer-wrapper { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    margin: 0; padding: 0; 
} 

.table-wrapper { 
    width: 100%; 
    height: 100%; 
    display: table; 
    vertical-align: middle; 
    text-align: center; 
} 

.table-cell-wrapper { 
    width: 100%; 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

你可以看到工作jsFiddle這裏。

Answer 4

只需添加最小高度：100％和最小寬度：100％，它將工作。我有同樣的問題。你不需要第三個包裝

Answer 5

我發現'寬度'的值越高，盒子寬度越小，反之亦然。我發現了這一點，因爲我之前有同樣的問題。所以：

.inner-wrapper { 
    width: 1%; 
} 

解決了這個問題。

Answer 6

歡迎2017年這幾天會使用vW和vH做的伎倆

html, body { 
 
    margin: 0; padding: 0; 
 
    width: 100%; height: 100%; 
 
} 
 

 
ul { 
 
    background: #CCC; 
 
    height: 100%; 
 
    width: 100%; 
 
    list-style-position: outside; 
 
    margin: 0; padding: 0; 
 
} 
 

 
li { 
 
    width: 100%; 
 
    display: table; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: 410px; 
 
} 
 

 
.outer-wrapper { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    margin: 0; padding: 0; 
 
} 
 

 
.inner-wrapper { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    width: 100vw; /* only change is here "%" to "vw" ! */ 
 
    height: 100vh; /* only change is here "%" to "vh" ! */ 
 
}

<ul> 
 
    <li> 
 
     <img src="#"> 
 
     <div class="outer-wrapper"> 
 
      <div class="inner-wrapper"> 
 
       <h1>My Title</h1> 
 
       <h5>Subtitle</h5> 
 
      </div> 
 
     </div> 
 
    </li> 
 
</ul>