使左边框移动到javascript中心

我正在对我当前的div进行更改,以便在div的中间需要一条垂直线.所以,我看到很多解决方案,他们正在制作一个左边界,在左边属性的帮助下,他们将它移动了左边的50％(实际上是在中间).

以下是我制作div的方法：

if (id == "Metricbar" ) {
      var Parentdiv = document.getElementById("homeContainer");
      var rowDiv = document.createElement("article");
      rowDiv.setAttribute("class", "col-sm-12 col-md-12 col-lg-12");
      rowDiv.style.border = "1px solid #ddd";
      rowDiv.style.marginBottom = "1px";
      rowDiv.style.marginTop = "1px";
      rowDiv.style.borderLeft = "2px solid #ddd";
      Parentdiv.appendChild(rowDiv);


      var ctrlDiv = document.createElement("div");
      ctrlDiv.setAttribute("data-widget-editbutton", "false");
      ctrlDiv.className = "jarviswidget";
      ctrlDiv.setAttribute("data-widget-fullscreenbutton", "false");
      ctrlDiv.id = id;
      var temp = $compile(ctrlDiv)($scope);
      angular.element(rowDiv).append(temp);
      rowDiv.appendChild(ctrlDiv);
}

我的问题是如何将其移至中心.有没有办法做到这一点？

我试过了：

rowDiv.style.borderLeft.marginLeft = "50%";
rowDiv.style.borderLeft.Left = "50%";
rowDiv.style.borderLeft.leftMargin = "50%";

但这一切都没有帮助.任何人都可以指出我正确的方向.

HTML文件：

<section id="widget-grid" class="" style="padding-left:13px;padding-right:13px;">
   <div class="row" id="homeContainer"></div>
   <div class="modaldialogs" style="display: none">
      <div class="center">
         <img alt="" src="img/ajax-loader.gif" />
      </div>
   </div>
</section>

但我多次使用这个div.我在这里检查id的基础.

我希望这条黑线如图所示

如果你只需要在文章元素中添加一条垂直线,那就让我们选择最简单的解决方案 – CSS！

首先,给出文章元素和位置：relative或position：absolute.然后添加一个：在psuedo-element之后创建一个垂直条.

HTML和Javascript没有受到影响(除了对文章边框的一个小改动),所以你只需要添加几行CSS.

var Parentdiv = document.getElementById("homeContainer");
 var rowDiv = document.createElement("article");
 rowDiv.setAttribute("class", "col-sm-12 col-md-12 col-lg-12");
 rowDiv.style.marginBottom = "1px";
 rowDiv.style.marginTop = "1px";
 rowDiv.style.borderTop = "2px solid #ddd";
 rowDiv.style.borderRight = "2px solid #ddd";
 rowDiv.style.borderBottom = "2px solid #ddd";
 rowDiv.style.borderLeft = "2px solid #ddd";
 Parentdiv.appendChild(rowDiv);

#homeContainer article {
  height: 300px;           // Just for demo purposes since we have no content
  position: relative;
}

#homeContainer article:after {
  content: "";
  height: 100%;
  width: 0px;
  position: absolute;
  border-right: 3px solid #000000;
  right: 50%;
}

<section id="widget-grid" class="" style="padding-left:13px;padding-right:13px;">
  <div class="row" id="homeContainer"></div>
  <div class="modaldialogs" style="display: none">
    <div class="center">
      <img alt="" src="img/ajax-loader.gif" />
    </div>
  </div>
</section>