CSS，求见教！_J2SE

CSS，求赐教！！！
现在有个页面是这样的代码如下，  有这么几个需求
1，<div id="main_bg"> 上下左右居中于<div id="main_bg">   并且两个div 会随着浏览器的大小自动相对变化
2，<div id="main_bg">这个div有输入框，输入框的大小可以随着输入文字的长度改变，默认情况下宽 300px

麻烦大神赐教，如何修改当前的页面！



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>
   {$PLUGIN_TITLE}
  </title><script language="php">
   $templateVersion = 2; // Template version

   // $fieldRowLayout determines the layout of the form fields
   // Options are 'fieldset' and 'table'
   // fieldset: displays fieldnames above the input box
   // table:    displays fieldnames in front of the input box
   $fieldRowLayout = 'table';

   // This JS file checks the form for required fields and correct syntax:
   print '<scr' . 'ipt src="/x/plugin/plugin.js.php?' . htmlspecialchars($_SERVER['QUERY_STRING']) . '" type="text/javascript"></scr' . 'ipt>';
</script>
  <style type="text/css">
html {
	height: 100%;
	width: 100%;
	background: #FFFFFF; /* Old browsers */
	font-family:'微软雅黑','宋体',Arial, Helvetica, sans-serif; 
}

body {
	height: 100%;
	width: 100%;
	margin: 0;
	border: 0;
	background-position: center center;
	-webkit-background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	font-size:12px; 
	font-family:'微软雅黑','宋体',Arial, Helvetica, sans-serif;  
	color:#333333; 
}
body.box{
	background-image: url(images/bg1.jpg);
	background-color:#adc8db;
}
#main_bg{
	position: absolute;
	top: 40%;
	left: 50%;
	width: 20%;
	height:10%;
	text-align: left;
	background-color: rgba(255, 255, 255, 0.8);
    color: #333333;
	margin:0 0 0 -176px;