html - 如何仅垂直包装div？

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

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

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

最佳答案

这就是你想要的吗？ DEMO

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

这是CSS：

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

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