CSS3 Flexbox Sample1-1

by FiNGAHOLiC

HTML

<textarea class="mod-textarea"></textarea>

CSS

html, body {
    margin: 0;
}

.mod-textarea {
    background: red;
    height: 100px;
    left: 50%;
    margin-left: -100px; 
    margin-top: -50px;
    position: fixed;
    top: 50%;
    width: 200px;
    z-index: 1;
}

JavaScript

/*
 * jQuery resize event - v1.1 - 3/14/2010
 * http://benalman.com/projects/jquery-resize-plugin/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */
(function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j="resize",d=j+"-special-event",b="delay",f="throttleWindow";e[b]=10;e[f]=true;$.event.special[j]={setup:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.add(l);$.data(this,d,{w:l.width(),h:l.height()});if(a.length===1){g()}},teardown:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.not(l);l.removeData(d);if(!a.length){clearTimeout(i)}},add:function(l){if(!e[f]&&this[k]){return false}var n;function m(s,o,p){var q=$(this),r=$.data(this,d);r.w=o!==c?o:q.width();r.h=p!==c?p:q.height();n.apply(this,arguments)}if($.isFunction(l)){n=l;return m}else{n=l.handler;l.handler=m}}};function g(){i=h[k](function(){a.each(function(){var n=$(this),m=n.width(),l=n.height(),o=$.data(this,d);if(m!==o.w||l!==o.h){n.trigger(j,[o.w=m,o.h=l])}});g()},e[b])}})(jQuery,this);

var $box = $('.mod-textarea');

$box.on('resize', function () {
    var boxWidth = $box.outerWidth();
    var boxHeight = $box.outerHeight();
    $box.css({
        marginTop: (boxHeight / 2) * -1,
        marginLeft: (boxWidth / 2) * -1,
    });
}).trigger('resize');