html - 如何仅垂直包装div？

Question

正如标题所说，我想在图像周围垂直包裹一个 div，但我希望宽度保持流畅和可变：

|_________________|
|     |XXXXXX|    |
|     |XXXXXX|    |
|     |XXXXXX|    |
|     |XXXXXX|    |
|     |XXXXXX|    |
|     |XXXXXX|    |
|-----------------|

其中框是容器，内容是字符块。底部和顶部应与内容块相遇，我希望内容居中（边距：0 auto;）。

Answer 1

这就是你想要的？演示

尝试调整小提琴中的输出部分的大小，您会看到内容将始终位于中心。

这是CSS：

.container {
    height: 300px;
    text-align: center;
    background: #CCC;
}

.inner {
    height: 100%;
    width: 300px;
    display: inline-block;
    border: 1px solid black;
}