如何垂直居中流體容器中的div？

我想能夠垂直居中包含元數據，如標題和作者在一個具有流體寬度的容器內的div。在下面的例子中，我希望.meta div在流體寬度的文章中垂直居中。如何垂直居中流體容器中的div？

我試過關於這篇文章（http://css-tricks.com/centering-in-the-unknown/），但它不起作用。

HTML

<div class="container"> 
    <h3>Test</h3> 
    <article> 
     <div class="meta"> 
      <div class="title"></div> 
      <div class="author"></div> 
        <img src="" /> 
     </div> 
    </article> 
</div>

CSS（使用更少）

.container { 
    h3 { 
     margin: -5px 0 0 0; 
     padding: 32px 0px 16px 0; 
     .freight-sans-pro; 
     font-size: 1.375em; 
     line-height: 1em; 
     font-weight: 200; 
    } 
    article { 
     max-height: 375px; 
      overflow: hidden; 
     position: relative; 
     z-index: 900; 
     margin-bottom: 2px; 
     background-color: @color-black; 
     line-height: 0em; 
     a { 
      max-height: 375px; 
      display: block; 
      img { opacity: .5; .opacity-transition; } 
     } 
     .meta { 
      width: 100%; 
      position: absolute; 
      bottom: 40%; 
      z-index: 500; 
      padding: 0px 10%; 
      color: @color-white; 
      font-size: 20px; 
      text-align: center; 
      .title { 
       margin: 0; 
       font-size: 2em; 
       line-height: 1em; 
       font-weight: 700; 
       text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.7); 
       padding-bottom: 8px; 
       text-decoration: none; 
       display: block; 
      } 
      .author { 
       margin: 0; 
       font-size: .8em; 
       line-height: .75em; 
       font-style: italic; 
       text-transform: uppercase; 
       text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.7); 
       text-decoration: none; 
       display: block; 
      } 
     } 
    } 
}

來源

2013-03-28 Matt

您是否試過[vertical-align]（http://www.w3schools.com/cssref/pr_pos_vertical-align.asp）？ – Alex 2013-03-28 03:10:18

我有...沒有運氣，只是堅持到頂部。 – Matt 2013-03-28 03:13:45

該文章正在使用'display：table'，text-align：center和'vertival-align：middle'，你可以嘗試一下嗎？ – egig 2013-03-28 03:16:40

想你的少，但在codepen.io所以不能調試得到了一個錯誤。

你可以嘗試像這樣簡單的東西：

.container { 
    border: 2px solid blue; 
    width: 180px; 
    height: 120px; 
    overflow: hidden; 
    display: table-cell; 
    vertical-align: middle; 
}

檢查工作here

您可能會發現這篇文章有用，以及：http://logconsole.com/vertical-align-center-image/

這是關於垂直居中的形象，但在大多數你可以用div來改變圖像的情況。

來源

2013-03-28 03:22:55 dkatwitt

試試這個你想要居中的東西。我改變了@ domkoscielak的代碼，以便它能夠正常工作。

.meta { 
    width: 180px; 
    height: 120px; 
    top: 50%; 
    margin-top: -60px; /*half of height*/ 
    position: absolute; 
}

來源

2013-03-28 03:29:56

你有一個完全不同的方法 - 位置絕對值和負值。檢查此codepen看到我的代碼在行動[http://codepen.io/domkoscielak/pen/DEisb](http://codepen.io/domkoscielak/pen/DEisb） – dkatwitt 2013-03-28 03:33:18

您的方法沒有在最新版本中工作鉻編輯：我想在頁面的中間。所以nvm，它在盒子裏工作。不過，我只是不喜歡在CSS中模擬表格。 – 2013-03-28 03:43:54

如何垂直居中流體容器中的div？

回答

相關問題