A Pen by Isaac Strack.

A-Pen-by-Isaac-Strack.markdown

A Pen by Isaac Strack

A Pen by Isaac Strack on CodePen.

License.

index.html

<div class="Container draggable" id="shell">
  <div class="Inside Absolute-Center">
    <div class="txt Absolute-Center">Multiple Here I am!       (multiple lines)</div>
  </div>
</div>

<div class="Container draggable" id="shell"  style="top:350px;">
  <div class="Inside Absolute-Center">
    <div class="txt Absolute-Center">Here I am!</div>
  </div>
</div>

<div class="Container Absolute-Center immovable" id="shell">
  <div class="Inside Absolute-Center">
    <div class="txt Absolute-Center">I am centered!</div> 
  </div>
</div>

script.js

// draggable code cannibalized from https://mdn.mozillademos.org/files/5031/draggable_elements.html
var
		oActive, nMouseX, nMouseY, nStartX, nStartY,
		bMouseUp = true, nZFocus = /* the highest z-Index present in your page plus 1: */ 100;
    $(document).on('mousedown',function (oPssEvt1) {
		var bExit = true, oMsEvent1 = oPssEvt1;
		for (var iNode = oMsEvent1.target; iNode; iNode = iNode.parentNode) {
			if (iNode.className.indexOf("draggable")>=0) { 
        bExit = false; oActive = iNode; break; 
      }
		}
		if (bExit) { return; }
		bMouseUp = false;
		nStartX = nStartY = 0;
		for (var iOffPar = oActive; iOffPar; iOffPar = iOffPar.offsetParent) {
			nStartX += iOffPar.offsetLeft;
			nStartY += iOffPar.offsetTop;
		}
		nMouseX = oMsEvent1.clientX;
		nMouseY = oMsEvent1.clientY; 
		oActive.style.zIndex = nZFocus++;
		return false;
	});

	$(document).on('mousemove', function (oPssEvt2) {
		if (bMouseUp) { return; }
		var oMsEvent2 = oPssEvt2 || /* IE */ window.event;
		oActive.style.left = String(nStartX + oMsEvent2.clientX - nMouseX) + "px";
		oActive.style.top = String(nStartY + oMsEvent2.clientY - nMouseY) + "px";
	});

	$(document).on('mouseup',function (e) {
		bMouseUp = true;
	});

style.css

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.Container{
  position: absolute;
  width:300px;
  height: 300px;
  background-color:#445;
  color: #CCC;
  font-family: "Verdana" Sans-Serif;
  font-size: 14pt;
  border:solid 2px #222;
  border-radius:5px;

}

.Inside {
  width: 200px;
  height: 200px;
  background-color:olive;
  border-radius:5px;
  display:table;
}

.txt{
  text-align:center;
  width:100%;
  display:table;
}

.immovable{
  width:250px;
  height:250px;
  background-color:#644;
}