javascript - CSS Styling 填充元素左边和元素右边的空格

Question

想象一个元素，它在它的容器中居中，有它的宽度，但不知道确切的宽度，比如文本，我希望左边和右边的空间相同并且有颜色，像这样:

---------------- 测试这个----------------

#left {
  background-color: red;
}
#middle {
  width: 200px;
  /* it might be different */
}
#right {
  background-color: red;
}

<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>

Answer 1

    .container{
       display:flex;
    }
     .main-body{
       flex:1 1 auto;
    }
    #left{
        background-color: red;
   }
   #middle{
        width: 200px;
       text-align:center;
  }
    #right{
        background-color: red;
    }
  <div class="container">
    <div class="main-body" id="left"></div>
    <div id="middle">Hello</div>
    <div  class="main-body" id="right"></div>
  </div>