Question

我希望能够在包含流体宽度的容器中将包含元数据（如Title和Author）的div垂直居中。在下面的例子中，我希望.meta 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（使用LESS）

.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;
            }
        }
    }
}

Answer 1

尝试了Less，但在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更改图像。

Answer 2

尝试使用您想要居中的内容。我修改了@ domkoscielak的代码，以便它可以工作。

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

如何在液体容器中垂直居中？

2 个答案: