title: WP7 - How to vertically center a div inside a webbrowser with javascript
body: <p>I tried this on the WP7 forums and got nothing...</p>
  
  <p>I am generating a rather simple html document, with all of its contents in a div.  I need to vertically center that div in a webbrowser control.  The usual approach of an outer div with "display: table" and an inner div with "display: table-cell" doesn't work in WP7-IE, so I went with javascript.  This very simple js function works on desktop browsers:</p>
  
  <pre><code>    function setContent() {
          var windowHeight = document.documentElement.clientHeight;
          if (windowHeight &gt; 0) {
              var contentElement = document.getElementsByClassName('DivToCenter')[0];
              var contentHeight = contentElement.offsetHeight;
  
              if (windowHeight - contentHeight &gt; 0) {
                  contentElement.style.position = 'relative';
                  contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
                  window.external.Notify('' + ((windowHeight / 2) - (contentHeight / 2)));
              }
              else {
                  contentElement.style.position = 'static';
              }
          }
      }
      window.onload = function() {
          setContent();
      }
      window.onresize = function() {
          setContent();
      }
  </code></pre>
  
  <p>The result of this function is that the div appears too low in the webbrowser control, as if the viewport had a greater height than it actually does.  I pulled the size of the viewport out of the javascript, and noticed that its identical to the WebBrowser.ActualHeight property.  So, my working hypothesis right now is that the size of the viewport reported to the javascript is in xaml logical pixels, which messes up the arithmetic.  Thats my best theory about what's hapenning.</p>