Div 嵌套 div 大小非常灵活

Question

我正在寻找一种简单而优雅的解决方案来执行以下操作：

我在 Whosebug 上看到了一堆问答，但是大多数描述了一些固定（已知）的像素大小。我想要实现的是真正灵活的布局，其中：

1) 将 div 放置在某个垂直位置并使其具有一定高度 -> 通过设置 position: fixed; top: 30%; height: 40%;

解决

2) 将 div 水平放置在中心 -< 已尝试 width: auto; margin: 0 auto; 但这没有用

3) 调整嵌套 divs 的大小（我现在正在使用跨度，但在这种情况下可能并不重要），其高度等于 1 行的宽度和高度等于父级的 1/3（大约）div。此外，我希望那些嵌套的 divs 与内容无关，即根据 div 的大小设置字体大小，而不是通过增加文本大小来推动 divs。另外，到目前为止，如果我从嵌套的 divs

中排除几个字幕，整个事情就会崩溃

目前看起来是这样的：

我很确定这在没有任何 js 的情况下是可以实现的，我很乐意就此获得任何建议。

谢谢

更新 1：我正在将 post 和 link 更新为 fiddle，感谢 Sari 的建议。

Answer 1

尝试使用计算函数设置顶部：

top: calc(30%);

Answer 2

您可能需要考虑对此布局使用 flexbox。就其本质而言，flexbox 是 flexible box.

试试这个：

HTML（your fiddle demo没有变化）

<div id="flexdiv">
    <div id="li1" class="li">
        <span id="l1" class="l">1</span>
        <span id="l2" class="l">2</span>
        <span id="l3" class="l">3</span>
        <span id="l4" class="l">4</span>
    </div>
    <div id="li2" class="li">
        <span id="l5" class="l">5</span>
        <span id="l6" class="l">6</span>
        <span id="l7" class="l">7</span>
        <span id="l8" class="l">8</span>
    </div>
    <div id="li3" class="li">
        <span id="l9" class="l">9</span>
        <span id="l10" class="l">A</span>
        <span id="l11" class="l">B</span>
        <span id="l12" class="l">C</span>
    </div>
</div>

CSS

html, body { height: 100%; } 

body {
    display: flex; /* establish flex container */
    justify-content: center; /* center #flexdiv horizontally */
    align-items: center; /* center #flexdiv vertically */
}

#flexdiv {
    display: flex; /* establish (nested) flex container */
    flex-direction: column; /* align li boxes vertically */
    height: 48vmin; /* height relative to viewport size */
}

.li {
    display: flex;
    text-align: center;
    height: 16vmin; /* height relative to viewport size */
}

.l {
    width: 16vmin; /* boxes maintain aspect ratio */
    line-height: 16vmin; /* vertically center text */
    font-size: 7vmin; /* font size scales */
}

演示：http://jsfiddle.net/6bsoze4z/4/

Div 嵌套 div 大小非常灵活

Div with nested divs sized really flexibly

html

css

center

flexbox