Center a div with bootstrap

Solution to this question:

  

Just investigate more about some of the modalities, which   I stay as follows:

<div class="modal fade" id="modal_form_proceso" role="dialog"
             aria-labelledby="myModalLabel">
            <div class="center-block" class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header modal-header-success">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h3 align="center" class="modal-title" id="modal-title-plaza">INGRESE SU NOMBRE COMPLETO</h3>
                    </div>
                    <div class="form-horizontal">
                        <div class="modal-body">
                            <div class="box-body">
                                <form action="#" id="form_persona">
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <input type="hidden" id="numero_unico"> 
                                            <input class="form-control text-center"
                                                   id="nombre_completo" name="nombre_completo"
                                                   style="width: 100%"></div><span class="help-block"></span>
                                    </div><br><br>
                                    <div class="modal-footer" align="center">
                                        <button class="btn btn-success btn-lg" id="btnGuardar" type="button"><i class="glyphicon glyphicon-floppy-saved"></i> Guardar</button>
                                        <button class="btn btn-danger btn-lg" type="button" onclick="girar_ruleta()" data-dismiss="modal"><i class="glyphicon glyphicon glyphicon-tower"></i> Jugar</button>
                                    </div>
                            </div>

Try the "center-block" bootstrap class.

You must bear in mind that for the center-block to work, the X-size modal must be contained in something of size X.

Try just adding the "center-block" class to your div
If it does not work, try to give the FATHER of your div the class col-xs-12.

<div class="col-xs-12">
    <div class="center-block">
    </div>
</div>

I would like to add one more thing, and that is that normal, I'm almost 100% sure that can be solved with bootstrap classes.

Another solution, try adding just before of that box that you have moved to the right, the following: A SPAN with the CLEARFIX class.

Staying something like this:

<span class="clearfix"></span>
<div class="center-block"></div>

This class does "reboot" GRID mode or bootstrap grids.

For the image that you have sent, it gives the feeling that in the previous row just to the modal, there are plenty of holes, as it works bootstrap in 12 columns. If in that row there is a gap at the end, and this modal by columns can enter, it will. This can be solved with the class "clearfix" in a span.

It feels like your box is in the previous row where "it has a space to be placed", by clearfix you restart the row to another 12 new columns.

As the third and last solution proposal, you can "force" it to be as you like, you can always apply a css to that specific box.

For example, create the class in CSS

.centrarCaja {
    position:relative;
    left:40%;
}

You add the class to your box, the one you want to center.

You already modify the exact% to center it correctly.

If you ignore it, adding the CSS class, although I do not recommend it at all, you can use the !important , leaving something like this:

.centrarCaja{
    position :relative !important; 
    left: 40% !important;
}

So you're going to force that style or CSS design to be used and place the box as you like.

To center any element on the screen, use the margin:auto; style in the element you want. To do this, open the styles you are using in that modal and look for the style #modal_form_process .

#modal_form_proceso{
     margin:auto;
    }

I would think that applying these css rules can work:

#modal_form_proceso
 {
    position: absolute;
    top: 50%;
    left: 50%;
 }

(this works to center it vertically)

But, you can try putting

<center>
   <div class="modal-dialog" role="document">
     [...]
   </div>
</center>

(and this horizontal)

In bootstrap 4 the .center-block. to become obsolete, instead you can use the .mx-auto.

<div class="mx-auto" style="width: 200px;">
     Centered element
</div>

More information: Bootstrap4 Spacing

You can use offset

<body class="container">
  <div class="row">
    <div class="col-md-2 col-md-offset-5">
      Esto esta centrado
    </div>
   </div>
  </div>
 </body>