首先，请不要再使用<center>和align来居中页面了，这是Stone Age人们的用法。

其次，请区分元素是block-level还是inline的，具体可以通过wiki查看，list of inline-level elements 和 list of block-level elements.block-level元素不会受text-align属性控制，同时inline元素可以通过display属性控制显示的类别，比如你指定img { display: block; }，text-align也不会生效。

水平居中inline内容

如前所属，inline元素只要使用{ text-align: center; }就可以实现，而且该属性是加在父元素上，影响子元素的布局

但需要注意两点，1是IE的Bug，另一个是text-align是继承的。

水平居中block-level元素

使用margin属性，设置{ margin:auto; width:auto}

http://haslayout.net/css-tuts/Horizontal-Centering

1. 使用背景图片做提示

textarea {
  background: url(images/benice.png) center center no-repeat; /* This ruins default border */
  border: 1px solid #888;
}

当输入内容时提示背景消失，可以使用javascript实现，

$('textarea')
  .focus(function() { $(this).css("background", "none") })
  .blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(images/benice.png) center center no-repeat") } });

2. HTML5 placeholder text
HTML5引入了一个新的属性，placeholder，可以实现相同的效果

3. Placeholder text, HTML5 with jQuery fallback
我们可以判断浏览器是否支持新的属性，如下

function elementSupportsAttribute(element, attribute) {
  var test = document.createElement(element);
  if (attribute in test) {
    return true;
  } else {
    return false;
  }
};

使用JS实现如果有palcehodler属性则用html5实现提示，否则用模拟的方式

if (!elementSupportsAttribute('textarea', 'placeholder')) {
  // Fallback for browsers that don't support HTML5 placeholder attribute
  $("#example-three")
    .data("originalText", $("#example-three").text())
    .css("color", "#999")
    // .attr("val", $("#example-three").text())
    .focus(function() {
        var $el = $(this);
        if ($el[0].value == $el.data("originalText")) {
          $el[0].value = "";
        }
    })
    .blur(function() {
      var $el = $(this);
      // console.log($el.text(), "value: " + $el.attr("val"));
      if ($el[0].value == "") {
          $el[0].value = $el.data("originalText");
      }
    });
} else {
  // Browser does support HTML5 placeholder attribute, so use it.
  $("#example-three")
    .attr("placeholder", $("#example-three").text())
    .text("");
}

4. Webkit浏览器的属性
所有Webkit浏览器，firefox，opera，chrome都有蓝色的边框，可以去掉，不过建议不要去掉

textarea {
  outline: none;
}

5. 删除缩放处理器
所有Webkit浏览器，chrome有缩放大小功能，可以去掉

textarea {
 resize: none;
}

6. 添加缩放
使用resizeable interaction实现

7. 自动增长

使用auto resizing textareas实现

8. 取消自动换行

一般元素使用 #whatever { white-space: nowrap; }就可以了，但是textarea不行，

9. 删除IE上的自动滚动条

IE浏览器上的textarea默认有一个灰色的滚动条，可以删除

textarea {
  overflow: auto;
}

原文地址：http://css-tricks.com/textarea-tricks/