div#container 如何自动适应里面的子div宽度，并居中？

Question

    <div id="container">
        <div id="register">注册</div>
        <div id="roll">上课点名</div>
        <div id="check">出勤查询</div>
    </div>

div的结构很简单， 在不对子div指定固定px 的情况下，子div子可以写20%,
现在有3个需求
1.div#container的宽度和里面的子div的宽度一致。
2.div#container相对document居中
3.div是document的20%。

div#container{
    border:1px solid red;
    margin:0 auto;
}
div#register,div#roll,div#check{
    border:1px solid black;
    width:20%;
    text-align:center;
}

上面无法做到,请问，如何写css?

Answer 1

额，这个需求可以变成这样吗：

1. div#container宽度是document的20%，并且居中
2. div#container > div 宽度和 div#container 一致。

Answer 2

把div#container变成inline-block元素，至于它的居中在它的父元素内添加 text-align: center; 当然居中还有很多其他方法

这个就是不定宽的居中解决方案，display:table, flex等都可以解决