title: Positioning arrow on the middle of a div
body: <p>I need to position arrow in the top and middle and of the div. The width of div changes dynamically and when i use left:%50 to position arrow in the middle then it adds the width of arrow and because of that the result is not satisfactory.</p>
  
  <p><a href="https://jsfiddle.net/cLrcqww1/" rel="nofollow"><strong>DEMO</strong></a></p>
  
  <p><strong>CODE</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
    display: inline-block;
    position: absolute;
    padding: 1px;
    color: #000;
    border: 0px solid #cc3333;
    background-color: grey;
  }
  #wrapper em.out {
    position: absolute;
    left: 50%;
    top: -7px;
    display: block;
    background: transparent;
    border-left: 7px dashed transparent;
    border-right: 7px dashed transparent;
    border-bottom: 7px solid grey;
    overflow: hidden;
  }
  #wrapper em.inner {
    position: absolute;
    left: 50%;
    top: -7px;
    display: block;
    background: transparent;
    border-left: 7px dashed transparent;
    border-right: 7px dashed transparent;
    border-bottom: 7px solid grey;
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;em class="out"&gt;&lt;/em&gt;
    &lt;em class="inner"&gt;&lt;/em&gt;
    &lt;div&gt;
      &lt;div style="margin:1px;background-color:white;"&gt;
        &lt;option&gt;------John------&lt;/option&gt;
      &lt;/div&gt;
      &lt;div style="margin:1px;background-color:white;"&gt;
        &lt;option&gt;------David------&lt;/option&gt;
      &lt;/div&gt;
      &lt;div style="margin:1px;background-color:white;"&gt;
        &lt;option&gt;------Jennifer------&lt;/option&gt;
      &lt;/div&gt;
      &lt;div style="margin:1px;background-color:white;"&gt;
        &lt;option&gt;------Sue------&lt;/option&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>