How to center a div with content that is in the middle of the page

0

Estimated how I can center a div with a registration form that is in a specific section of the page. the page has 2 sections. in the first the login form and in the second the registration form. the problem I have is that I can not center the div with the registration form because if I center it in the middle of the page the div would cover the div login.

here the login div image

here the div image with registration form

This is the one I want shown to the middle and not to the left I want it to be displayed in the same way as in the div login

Here the html code of the div register user.

<section id="fh5co-contact" data-section="Registrese">
<div class="container">
<!----------------------------------------------INICIO REGISTRAR USUARIO------------------------------------------------------>

<div class="container">
<div class="row">
            <div class="col-md-12 section-heading text-center">
                <h2 class="to-animate">Eres Nuevo? Registrese gratis</h2>
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 subtext to-animate">
                        <h3>Formulario de Registro</h3>
                    </div>
                </div>
            </div>
        </div>

<div class="row row-bottom-padded-md">
<form method="POST" action="registraUsuarioServlet.do">
<div class="col-sm-6 to-animate">
<h3>Registrese</h3>

<div class="form-group ">
                    <label for="name" class="sr-only">Nombre</label>
                    <input id="name" class="form-control" placeholder="Nombre" type="text" name="txt_nombre" required>
                </div>

<div class="form-group ">
                    <label for="name" class="sr-only">Apellido</label>
                    <input id="name" class="form-control" placeholder="Apellido" type="text" name="txt_apellido" required>
                </div>

<div class="form-group ">
                    <label for="name" class="sr-only">Perfil</label>
                    <input id="name" class="form-control" placeholder="Perfil" value="Cliente" type="text" name="txt_perfil" required style="display:none">
                </div>

<div class="form-group ">
                    <label for="email" class="sr-only">Usuario</label>
                    <input id="email" class="form-control" placeholder="Email" type="email" name="txt_email" required>
                </div>


<div class="form-group ">
                    <label for="password" class="sr-only">Contraseña</label>
                    <input id="password" class="form-control" placeholder="Contraseña" type="password" name="txt_contrasena" required>
                </div>


<div class="form-group">

<label for="name" class="sr-only">Estacion</label>

<select id="estn" class="form-control" placeholder="Estación" name="txt_estacion" required>
                                                                    <option>01H</option>
                                                                    <option>13J</option>
                                                                    <option>14M</option>
                                                                    <option>30E</option>
                                                                    <option>61H</option>
                                                                    <option>62H</option>
                                                                    <option>ANF</option>
                                                                    <option>ARI</option>
                                                                    <option>BBA</option>
                                                                    <option>CCH</option>
                                                                    <option>CCP</option>
                                                                    <option>CJC</option>
                                                                    <option>CNR</option>
                                                                    <option>COW</option>
                                                                    <option>CPO</option>
                                                                    <option>DAT</option>
                                                                    <option>ESR</option>
                                                                    <option>FFU</option>
                                                                    <option>FRT</option>
                                                                    <option>GXQ</option>
                                                                    <option>HRF</option>
                                                                    <option>IPC</option>
                                                                    <option>IQQ</option>
                                                                    <option>KNA</option>
                                                                    <option>LA1</option>
                                                                    <option>LLC</option>
                                                                    <option>LOB</option>
                                                                    <option>LSC</option>
                                                                    <option>LSQ</option>
                                                                    <option>MHC</option>
                                                                    <option>NNT</option>
                                                                    <option>OVL</option>
                                                                    <option>PLA</option>
                                                                    <option>PMC</option>
                                                                    <option>PNT</option>
                                                                    <option>PUQ</option>
                                                                    <option>PUX</option>
                                                                    <option>QOV</option>
                                                                    <option>QRC</option>
                                                                    <option>QTN</option>
                                                                    <option>QUI</option>
                                                                    <option>RCG</option>
                                                                    <option>SCB</option>
                                                                    <option>SCL</option>
                                                                    <option>SNT</option>
                                                                    <option>TLG</option>
                                                                    <option>TLX</option>
                                                                    <option>TOD</option>
                                                                    <option>TOQ</option>
                                                                    <option>UDC</option>
                                                                    <option>ULC</option>
                                                                    <option>VAL</option>
                                                                    <option>VAP</option>
                                                                    <option>VDL</option>
                                                                    <option>VES</option>
                                                                    <option>VHT</option>
                                                                    <option>VRR</option>
                                                                    <option>WCA</option>
                                                                    <option>WCH</option>
                                                                    <option>WPA</option>
                                                                    <option>WPU</option>
                                                                    <option>YAI</option>
                                                                    <option>ZAL</option>
                                                                    <option>ZCA</option>
                                                                    <option>ZCO</option>
                                                                    <option>ZCQ</option>
                                                                    <option>ZLU</option>
                                                                    <option>ZMP</option>
                                                                    <option>ZOS</option>
                                                                    <option>ZPC</option>
                                                                    <option>ZPD</option>
                                                                    <option>ZPV</option>
                                                                    <option>ZUD</option>

                                                                </select>

</div>

<div class="form-group">
                    <input class="btn btn-primary btn-block btn-lg" value="Registrar" type="submit">
                </div>


</div>
</form>
</div>

</div>

<!----------------------------------------------FIN REGISTRAR USUARIO------------------------------------------------------>  

</div>
</div>

</section>

here the aboostrap and jquery links

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
asked by Simón Pereira Vigouroux 21.11.2018 в 16:29
source

1 answer

0

An easy way to achieve what you want is to change the div class to col-md-12 like this:

<section id="fh5co-contact" data-section="Registrese">
<div class="container">
<!----------------------------------------------INICIO REGISTRAR USUARIO------------------------------------------------------>

<div class="container">
<div class="row">
            <div class="col-md-12 section-heading text-center">
                <h2 class="to-animate">Eres Nuevo? Registrese gratis</h2>
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 subtext to-animate">
                        <h3>Formulario de Registro</h3>
                    </div>
                </div>
            </div>
        </div>

<div class="row row-bottom-padded-md">
<form method="POST" action="registraUsuarioServlet.do">
<div class="col-sm-12 to-animate">
<h3>Registrese</h3>

<div class="form-group ">
                    <label for="name" class="sr-only">Nombre</label>
                    <input id="name" class="form-control" placeholder="Nombre" type="text" name="txt_nombre" required>
                </div>

<div class="form-group ">
                    <label for="name" class="sr-only">Apellido</label>
                    <input id="name" class="form-control" placeholder="Apellido" type="text" name="txt_apellido" required>
                </div>

<div class="form-group ">
                    <label for="name" class="sr-only">Perfil</label>
                    <input id="name" class="form-control" placeholder="Perfil" value="Cliente" type="text" name="txt_perfil" required style="display:none">
                </div>

<div class="form-group ">
                    <label for="email" class="sr-only">Usuario</label>
                    <input id="email" class="form-control" placeholder="Email" type="email" name="txt_email" required>
                </div>


<div class="form-group ">
                    <label for="password" class="sr-only">Contraseña</label>
                    <input id="password" class="form-control" placeholder="Contraseña" type="password" name="txt_contrasena" required>
                </div>


<div class="form-group">

<label for="name" class="sr-only">Estacion</label>

<select id="estn" class="form-control" placeholder="Estación" name="txt_estacion" required>
                                                                    <option>01H</option>
                                                                    <option>13J</option>
                                                                    <option>14M</option>
                                                                    <option>30E</option>
                                                                    <option>61H</option>
                                                                    <option>62H</option>
                                                                    <option>ANF</option>
                                                                    <option>ARI</option>
                                                                    <option>BBA</option>
                                                                    <option>CCH</option>
                                                                    <option>CCP</option>
                                                                    <option>CJC</option>
                                                                    <option>CNR</option>
                                                                    <option>COW</option>
                                                                    <option>CPO</option>
                                                                    <option>DAT</option>
                                                                    <option>ESR</option>
                                                                    <option>FFU</option>
                                                                    <option>FRT</option>
                                                                    <option>GXQ</option>
                                                                    <option>HRF</option>
                                                                    <option>IPC</option>
                                                                    <option>IQQ</option>
                                                                    <option>KNA</option>
                                                                    <option>LA1</option>
                                                                    <option>LLC</option>
                                                                    <option>LOB</option>
                                                                    <option>LSC</option>
                                                                    <option>LSQ</option>
                                                                    <option>MHC</option>
                                                                    <option>NNT</option>
                                                                    <option>OVL</option>
                                                                    <option>PLA</option>
                                                                    <option>PMC</option>
                                                                    <option>PNT</option>
                                                                    <option>PUQ</option>
                                                                    <option>PUX</option>
                                                                    <option>QOV</option>
                                                                    <option>QRC</option>
                                                                    <option>QTN</option>
                                                                    <option>QUI</option>
                                                                    <option>RCG</option>
                                                                    <option>SCB</option>
                                                                    <option>SCL</option>
                                                                    <option>SNT</option>
                                                                    <option>TLG</option>
                                                                    <option>TLX</option>
                                                                    <option>TOD</option>
                                                                    <option>TOQ</option>
                                                                    <option>UDC</option>
                                                                    <option>ULC</option>
                                                                    <option>VAL</option>
                                                                    <option>VAP</option>
                                                                    <option>VDL</option>
                                                                    <option>VES</option>
                                                                    <option>VHT</option>
                                                                    <option>VRR</option>
                                                                    <option>WCA</option>
                                                                    <option>WCH</option>
                                                                    <option>WPA</option>
                                                                    <option>WPU</option>
                                                                    <option>YAI</option>
                                                                    <option>ZAL</option>
                                                                    <option>ZCA</option>
                                                                    <option>ZCO</option>
                                                                    <option>ZCQ</option>
                                                                    <option>ZLU</option>
                                                                    <option>ZMP</option>
                                                                    <option>ZOS</option>
                                                                    <option>ZPC</option>
                                                                    <option>ZPD</option>
                                                                    <option>ZPV</option>
                                                                    <option>ZUD</option>

                                                                </select>

</div>

<div class="form-group">
                    <input class="btn btn-primary btn-block btn-lg" value="Registrar" type="submit">
                </div>


</div>
</form>
</div>

</div>

<!----------------------------------------------FIN REGISTRAR USUARIO------------------------------------------------------>  

</div>
</div>

</section>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
answered by 21.11.2018 в 16:38