Edit in JSFiddle

$('resize').addEvent('click', function(){
    if (this.hasClass('on')){
        $('modal-content').tween('width', 300);
    else {
        $('modal-content').tween('width', 100);
<button id="resize">Test Content Adaptability</button>

<table id="modal">
    <tbody id="modal-tbody">
        <tr id="modal-tr">
            <td id="modal-td">
                <div id="modal-content">
                    <div id="modal-body">
                    Some modalicious content here for your  viewing  pleasure. It centers itself no matter what the size or how the  amount of content you add to the modal, how fun!

html, body
    height: 100%;   

    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    background: red;

#modal-tbody, #modal-tr, #modal-td
    height: 100%;

    vertical-align: middle;

    position: relative;
    left: 100%;
    height: auto;
    width: 50%; 
    max-width: 225px;
    min-width: 80px;
    max-height: 80%;
    min-height: 80px;
    margin: 0 auto;
    border: 1px solid;
    background: #eaeaea;
    overflow: auto;