css - 3格33.3％绝对居中

我正在尝试在父级内部创建3 div，但是我所做的任何尝试都没有运气..（这就是我得到的http://prnt.sc/bytx6l）

这个想法是创建3 div的33％高度（我不想使用每个137像素的高度）。
第二是绝对将3 div内的任何内容居中。
（这就是我想要的http://prnt.sc/bytzu1）
PS。我不想只使用div

我做错了什么？有什么帮助吗？

body {background-color: #111;margin-left: 0px;margin-right: 0px;margin-bottom: 0px; color: #ffffff;}
	#tbl {display: table; width:100%; margin-top:-4px;}
	#row {display: table-row; width:100%;}
	.title {font-weight:400; font-size: 170%; color:#ebebeb;}
	#a {display: table-cell; background-color: #3a3a39; padding: 0px 0px 0px 6px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;
		width:170px; text-align: center; }
	#a-choose {display: table-cell; background-color: #3a3a39; text-align: center; width:40%;}
	#a-left {height: 100%; width:100%; display:block; background-color: rgba(31,30,30,1);}
	#empty {display: table-cell; background-color: #3a3a39; width:10px; text-align: center; }
	#b {display: table-cell; background-color: #3a3a39; padding: 0px 0px 0px 6px; border-top-right-radius: 8px; border-bottom-right-radius: 8px;
		width:170px; text-align: center; }
	#b-choose {display: table-cell; background-color: #3a3a39; text-align: center; width:40%;}
	#b-left {height: 100%; width:100% ;display:block; background-color: rgba(31,30,30,1);}
	.j-left {border:1px solid #dc6210; margin:-1px 4px -1px -4px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
	.j-right {border:1px solid #dc6210; margin-right:2px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
	#spacer {display: table-row; height: 6px;}
	#block {width:100%; height: 33% /*137px*/;}

<div style="width:800px;height:560px;margin:auto auto;background-color:#262626;margin-top:50px;">
    <div id="tbl">
        <div id="spacer"></div>
        <div id="row">
            <div id="a" class="title">1</div>
            <div id="a-choose">
            </div>
            <div id="empty"></div>
            <div id="b-choose">
            </div>
            <div id="b" class="title">2</div>
        </div>
        <div id="spacer"></div>
        <div id="row">
            <div id="a" class="j-left" style="height:412px;">LLLLLL-h=412px</div>
                <div id="a-choose" style="border:1px solid #dc6210;">
                    <div id="a-left">
                        <div id="block" style="">a</div>
                        <div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">a</div>
                        <div id="block" style="">a</div>
                    </div>
                </div>
            <div id="empty" style="background-color: transparent;">&nbsp;</div>
                <div id="b-choose" style="border:1px solid #dc6210;">
                    <div id="b-left">
                        <div id="block" style="">b</div>
                        <div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">b</div>
                        <div id="block" style="">b</div>
                    </div>
                </div>
            <div id="b" class="j-right" style="height:412px;">RRRRRR-h=412px</div>
        </div>
        <div id="spacer"></div>
    </div>
</div>

最佳答案

由于#a-choose和#a-left是相对位置（默认情况下），因此无法计算height: 33%中的#block。

因此，应将样式position: absolute添加到#a-left，将position: relative添加到#a-choose。

This将很有帮助。

body {
    background-color: #111;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    color: #ffffff;
}

#tbl {
    display: table;
    width: 100%;
    margin-top: -4px;
}

#row {
    display: table-row;
    width: 100%;
}

.title {
    font-weight: 400;
    font-size: 170%;
    color: #ebebeb;
}

#a {
    display: table-cell;
    background-color: #3a3a39;
    padding: 0px 0px 0px 6px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    width: 170px;
    text-align: center;
}

#a-choose {
    display: table-cell;
    background-color: #3a3a39;
    text-align: center;
    width: 40%;
    position: relative;
}

#a-left {
    height: 100%;
    width: 100%;
    position: absolute;
    display: block;
    background-color: rgba(31, 30, 30, 1);
}

#empty {
    display: table-cell;
    background-color: #3a3a39;
    width: 10px;
    text-align: center;
}

#b {
    display: table-cell;
    background-color: #3a3a39;
    padding: 0px 0px 0px 6px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    width: 170px;
    text-align: center;
}

#b-choose {
    display: table-cell;
    background-color: #3a3a39;
    text-align: center;
    width: 40%;
    position: relative;
}

#b-left {
    height: 100%;
    width: 100%;
    position: absolute;
    display: block;
    background-color: rgba(31, 30, 30, 1);
}

.j-left {
    border: 1px solid #dc6210;
    margin: -1px 4px -1px -4px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.j-right {
    border: 1px solid #dc6210;
    margin-right: 2px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

#spacer {
    display: table-row;
    height: 6px;
}

#block {
    width: 100%;
    height: 33% /*137px*/;
}

<div style="width:800px;height:560px;margin:auto auto;background-color:#262626;margin-top:50px;">
    <div id="tbl">
        <div id="spacer"></div>
        <div id="row">
            <div id="a" class="title">1</div>
            <div id="a-choose">
            </div>
            <div id="empty"></div>
            <div id="b-choose">
            </div>
            <div id="b" class="title">2</div>
        </div>
        <div id="spacer"></div>
        <div id="row">
            <div id="a" class="j-left" style="height:412px;">LLLLLL-h=412px</div>
                <div id="a-choose" style="border:1px solid #dc6210;">
                    <div id="a-left">
                        <div id="block" style="">a</div>
                        <div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">a</div>
                        <div id="block" style="">a</div>
                    </div>
                </div>
            <div id="empty" style="background-color: transparent;">&nbsp;</div>
                <div id="b-choose" style="border:1px solid #dc6210;">
                    <div id="b-left">
                        <div id="block" style="">b</div>
                        <div id="block" style="border-top:1px solid #dc6210;border-bottom:1px solid #dc6210;">b</div>
                        <div id="block" style="">b</div>
                    </div>
                </div>
            <div id="b" class="j-right" style="height:412px;">RRRRRR-h=412px</div>
        </div>
        <div id="spacer"></div>
    </div>
</div>

关于css - 3格33.3％绝对居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38648194/