html - Centering text as block inside a div -

i'm building form used register users.

actually i'm having troubles css, i'd center child div inside parent div without success.

i've tried different methods , read lot here seems other solutions don't fit me.

i don't want use text-align: center; because don't want have centered text, pick text block , center it. has responsive, i've tried % don't how looks on browser.

css & hmtl:

/* ---===### register page ###===--- */  .registerpage1{  	width:100%;     	height: auto;  }  .registerpage2{  	  }  .registerpage1 ul{  	list-style: none;  }  div#regmailerror{  	display: none;  	color: red;	  }  div#regplenerror{  	display: none;  	color: red;	  }  div#regpmatcherror{  	display: none;  	color: red;	  }  div#regconderror{  	display: none;  	color: red;	  }

<section class="registerpage1">  	<section class="registerpage2">  		<form method="post" action="#" onsubmit="" id="regtopfit" name="regtopfit">  			<ul>  				<li>nombre:</li>  				<li><input type="text" name="nombre" placeholder="nombre"><input type="text" name="lastname" placeholder="apellidos"></li>  				<li><input type="email" name="email" placeholder="dirección de e-mail"></li>  				<li><div id="regmailerror">debes introducir una dirección de correo electrónico válida.</div></li>  				<li>crear contraseña:</li>  				<li><input type="password" name="pass1" placeholder="6-20 caracteres" ></li>  				<li><div id="regplenerror">debes introducir una dirección de correo electrónico válida.</div></li>  				<li><input type="password" name="pass2" placeholder="repite la contraseña" ></li>  				<li><div id="regpmatcherror">debes introducir una dirección de correo electrónico válida.</div></li>  				<li><input type="checkbox" name="offers" value="yes">quiero recibir las últimas novedades de <a href="#">topfit</a></li>  				<li><input type="checkbox" name="conditions" value="accepted" >he leído y acepto la <a href="#">política de privacidad</a>.</li>  				<li><div id="regconderror">debes introducir una dirección de correo electrónico válida.</div></li>  				<li><input type="submit" value="crea tu cuenta"></li>  			</ul>  		</form>  	</section>  </section>

thanks

set max-width, , margin-left , margin-right auto child div. when viewport goes beyond max-width, child div center inside parent div. (this assuming want horizontal centering)

add following css declarations .registerpage2:

.registerpage2 {     max-width: 350px; // set custom max-width value     margin-left: auto;     margin-right: auto; } 

here’s demo: http://jsfiddle.net/jonsuh/vjsnrp4h/