当窗口大小改变时，保持根div中心到页面

Question

请参阅以下代码

<div id="root">
<div id="child1">xxxx</div>
<div id="child2">yyyy</div>
</div>

css：

  #root
    {
        width:86%
        margin:0 auto;
    }
    #root div
    {
        width: 50%;
        float:left; 
        border: 1px solid red;
    }

它会将“根”div中心置于页面中心。但是某些分辨率未对齐（以中心为中心）

所以检查javascript / jquery代码而不是使用媒体查询（因为我使用的是iE8浏览器 - 不支持media）

<script type"text/javascript">

 if (window.screen.availWidth >= 1200 && window.screen.availWidth <= 1390  ) { 
$("#root").css("width","92%")

}
else
$("#root").css("width","86%")
</script>

但是当调整浏览器窗口大小时，div内容未对齐，不会以页面为中心。我怎样才能将div设置为所有分辨率的中心以及浏览器窗口的变化？

我不知道为每个时间窗口重新设置需要设置的宽度百分比。

如何解决此问题。

谢谢，

Answer 1

不，需要使用任何script来保持中心，它也是由CSS完成的：

这是DEMO

Answer 2

尝试将其放入.resize()方法：

$(window).on('resize', function(){
   if ($(this).width() >= 1200 && $(this).width() <= 1390  ) { 
      $("#root").css("width","92%");
   }else{
      $("#root").css("width","86%");
   }
}).resize();

---

不确定，但这可能会导致问题：

#root
{
    width:86%  // <-------here you have a missing ';'
    margin:0 auto;
}