diff --git a/dialog.css b/dialog.css
index 98594bc..30cb212 100644
--- a/dialog.css
+++ b/dialog.css
@@ -1,16 +1,22 @@
 .dialog {
   position: fixed;
-  left: 50%;
   top: 150px;
-  max-width: 600px;
-  min-width: 250px;
-  border: 1px solid #eee;
-  background: white;
+  left: 5%;
+  width: 90%;
   z-index: 1000;
+  text-align: center;
 }
 
 .dialog .content {
+  box-sizing: border-box;
+  position: relative;
+  background: white;
+  max-width: 600px;
+  min-width: 252px;
+  border: 1px solid #eee;
   padding: 15px 20px;
+  display: inline-block;
+  text-align: left;
 }
 
 /* close */
@@ -77,4 +83,11 @@
 .dialog.scale.hide {
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
-}
\ No newline at end of file
+}
+
+/* off-center */
+
+.dialog.off-center {
+  text-align: left;
+  width: inherit;
+}
diff --git a/index.js b/index.js
index 0922497..3a6448b 100644
--- a/index.js
+++ b/index.js
@@ -73,7 +73,7 @@ function Dialog(options) {
   this.render(options);
   if (active && !active.hiding) active.hide();
   if (exports.effect) this.effect(exports.effect);
-  
+
   active = this;
   this.on('escape', function(){
     active.hide();
@@ -247,11 +247,6 @@ Dialog.prototype.show = function(){
 
   // position
   document.body.appendChild(this.el);
-  if (!this._fixed) {
-    setTimeout(function() {
-      self.el.style.marginLeft = -(self.el.offsetWidth / 2) + 'px'
-    }, 0);
-  }
   this._classes.remove('hide');
   this.emit('show');
   return this;
diff --git a/test/index.html b/test/index.html
index abe8d87..e9e422a 100644
--- a/test/index.html
+++ b/test/index.html
@@ -5,6 +5,9 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <link rel="stylesheet" href="../build/build.css" />
     <style>
+      body {
+        margin: 0;
+      }
       .dialog .title {
         display: inline-block;
         margin: 0 0 5px 0;