Center Kendo Window on long page

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div class="demo-section">
    <h3 class="title">DropDownList</h3>
    <select id="dropdownlist"/>
</div>

CSS

html{font:12px sans-serif;}

JavaScript

$(document).ready(function() {
    function onOpen(e) {
        e.preventDefault();
        console.log("event: open");

        var is_empty = this.dataSource.data().length == 2;
        if (!is_empty) {return}
        
        this.select(function(dataItem) {
            return dataItem.value === "-1"; // vocabulary
        });
        this.trigger('change');
    };

    function onClose() {
        console.log("event: close");
    };

    function onChange() {
        console.log("event: change " + this.dataItem().value);
        if (this.dataItem().value == -1) {
            alert(1)
        }
    };

    function onSelect(e) {
        var dataItem = this.dataItem(e.item.index());
        console.log("event :: select (" + dataItem.text + " : " + dataItem.value + ")" );
    };

    var data = [
        {text: "[empty]", value:"1"},
        //{text: "Item", value:"2"},
        {text: "Vocabulary...", value:"-1"}
    ];

    $("#dropdownlist").kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        animation: false,
        dataSource: data,
        select: onSelect,
        change: onChange,
        close: onClose,
        open: onOpen
    });
});