Javascript 如何放置一组div'；动态地在网页的容器中心内

我想有一个div的设置在页面的中心，它的大小应该根据用户名的长度而变化

.Container1
{
  display: table;
  width: 100%;
  padding:0;
  margin:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.Container2{
   position: absolute;
   left:0;
   right:0;
   margin-right:auto;
   margin-left:auto;
   width:100%;
   max-height:30px;
   padding:0; 
   overflow:hidden;
}

<div id="maincontainer" runat="server" class="Container1">
            <div class="Container2" runat="server">
                <div class="leftbar"><img src="Some image" runat="server" /></div>
                <div id="child1container" runat="server">
                    <span class="textclass" runat="server">UserName</span>
                    <span class="textclass" id="BankName" runat="server">BankName</span>
                    <span class = "Col"> ---Some Content --- </span>
                    <span class="barBtn"> ----Logout Button----
                    </span>
                </div>
                <div class="rightbar"><img src="Some image" runat="server"/></div>
            </div>

    </div>

.Container1
{
显示：表格；
宽度：100%；
填充：0；
保证金：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.集装箱2{
位置：绝对位置；
左：0；
右：0；
右边距：自动；
左边距：自动；
宽度：100%；
最大高度：30px；
填充：0；
溢出：隐藏；
}
用户名
银行名称
---一些内容--
----注销按钮----

集装箱2内的一组区段是应该集中的区段。它占据网页的顶部，应位于中间，容器宽度应根据用户名的长度而变化（例如：对于较长的名称，整个容器应调整并位于中心）

我希望整个容器的行为符合JFIDLE中的规定：

---

如果更改用户名的长度，它将从中心展开，始终保持整个容器位置中心。如果我尝试在我的应用程序中实现与jfiddle类似的更改，它就不会选择更改。我希望所有元素在同一行中对齐。我想知道需要将哪些属性设置为container2和child1container才能使它们以这种方式工作。可以使用CSS来完成吗？或者我们可以使用javascript根据输入值改变容器大小（CSS样式）？

add

text align:center

到

.Container2

哪个是容器：

.Container2 {
  border: 1px solid black; // enable this is for test container border
  display: table;
    text-align: center;
}