为任何浏览器定位div在中心和左右的位置(跨浏览器)

Question

Three div panels:-
1) (div-B) one div with max-width = 500px and min-width=400px should always on 
    the center of all browsers.
2) (div-A) one div should show and hide on the left of (div-B) having min-width 
   = 200px and max-width= 300px;
3) (div-C) one div should show and hide on the right of (div-B) having min-width 
   = 200px and max-width= 300px;

div-A和div-C的show和Hide应该是这样的,它不应该从它的位置移动div-B,但是,它可以达到它的最大宽度和最小宽度.div-B应始终位于所有浏览器的中心.

页面布局: -

Header
<--Left button here                                       right button here-->
to open div-A panel                                       to open div-c panel
(basically a dropdown)                                  (basically a dropdown)


         Left Panel <---20px---> Center Panel <---20px---> Right Panel   
         (div-A)                  (div-B)                     (div-C)    

1) (div-A && div-B), (div-B && div-C) having margin 20px in between always.
   div-A should grow towards left and div-c should grow towards right relative to div-B(min-width and 
   max-width availability).
2) div-B should not move to right or left when div-A and div-C should hide. 
 But div-B should grow towards its left or right keeping div-B fixed to 
  center of browser window and tries to achieve its max-width(keeping center 
 axis fixed) if space available towards right or left.

<header>
//show hide button for div-A
<div class="div-A-button">Dropdown button A</div>
//show hide button for div-C
<div class="div-C-button">Dropdown button C</div>
</header>

<main>
<div class="panel div-A">Panel A </div>  //show and hide using div-A-button
<div class="panel div-B">Panel B </div>  //fixed always show
<div class="panel div-C">Panel C </div>  //show and hide using div-C-button
</main>

这是stackblitz链接:https://stackblitz.com/edit/angular-tpj35u ？ file = ssrc%2Fapp%2Fapp.component.html

Answer 1

您可以使用CSS网格.我想我已经理解了你的布局.如果以下示例是正确的,请告诉我.

main {
  border: 1px solid;
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(400px, 500px) minmax(200px, 300px);
  grid-gap: 20px;
  justify-content: center;
}

main>div {
  background: yellow;
  text-align: center;
  padding: 1em;
}

.div-B {
  grid-column: 2;
}

<main>
  <div class="panel div-A">Panel A </div>
  <div class="panel div-B">Panel B </div>
  <div class="panel div-C">Panel C </div>
</main>